Testing ensures the application is functioning correctly and allows you to be able to find bugs within the application before it goes into production.

The Importance of Testing

The significance of testing goes along way when one is developing a front-end application. There is a lot to take into consideration when building a UI - cross platform usability, ARIA, user experience to name a few.

Google suggests a 70-20-10 split of testing; 70% of tests should be unit tests, whilst 20% should include integration tests and 10% end-to-end testing.

Testing in ReactJS

A project in ReactJS is likely to have many integrations and interfaces hence it is likely to have more end-to-end and integration testing.

Unit tests are usually more prevalent in applications in which the focus is to handle data.

The testing discussed below is applicable to many libraries/frameworks within JavaScript however I will focus on utilising these testing methods within React.

End to End Testing

In end-to-end testing the focus is on testing the application as a whole; gaining an understanding of how well all the components of the application work together.

End-to-end tests may include the state of a log in form or how a website looks responsively on a mobile device.

Libraries

Cypress

npm install cypress --save-dev ./node_modules/bin/cypress open

describe('My Test', function () {
    it('Does something, function() {
        expect(something).to.equal(true)
    })
})

Integration Testing

This type of testing focuses on the intereactions between the components in an application.

For example manipulating the state within a component or handing down state to a child component via props.

Libraries

Enzyme

npm install enzyme enzyme-adapter-react-16

//set up file
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })

//test file
import { shallow, mount, render } from 'enzyme'
const wrapper = shallow(<YourComponent />)

//example test
describe('What is being tested', () => {
    it('Does what is should', () => {
        //test content
        //mount
        expect(testContent.find('.theItem')).toBeDefined()
    })
})

Unit Testing

How do you test if the API is working correctly on the front-end? Or if the button click is functioning correctly? This is where unit testing comes into place.

If you are using Facebook’s create-react-app you may have noticed it comes with Jest and a test to check the app component renders correct.

Libraries

If you are using create-react-app you can run npm test.

Otherwise run npm install jest and include the following in your package.json file: ... scripts: { "test": "jest", ... }

describe('What you are testing', () => {
    it('How it should function', () => {
        expect(test).toEqual(expectedOutCome)
    })
})