Learn how to write test for React Native application with Jest – part 1

Tram Ho

Since moving from mobile applications code to native to React Native, writing tests is the last thing I think about during application development. Our number one priority is to redo the application with React Native from the number 0 as quickly as possible. After release, there are many features that need to be deployed to test, and of course, we need to write test … for thousands of previous lines of code. We know the test writing is good practice, but to be motivated to write them is a completely different thing.

Fortunately, when we started writing tests, we wrote in Jest and realized that writing this test was quite easy. My goal today is to instruct you to write test using Jest more easily by explaining things that I have learned while working with it.

I. Adding Jest to the project:

In RN versions 0.38 and above, Jest has been built in when you create the project with react-native init , so this setup for you may already be available and no more setup is needed. If you want to learn more, you can go here to see: setting up testing with React Native.

1. Install packages:

Install 3 libraries: jest , babel-jest and react-native-renderer .

2. Complete so we can start the test:

Now we just need to run the npm test command in the command line to test!

3. Create the first test play:

The following test is quite simple, creating a snapshot of the output of the render for the Login component.

I will not say about the snapshot here because it is quite long. If you want to understand why a snapshot is needed, you can refer here . Basically, we need to make sure that each time the test runs, the output render matches (update snapshot when they change).

II. Do more with snapshots:

When I started writing tests, I quickly realized the react-test-renderer not very good for complicated components, so we used a rather delicious library of Airbnb as Enzyme.

Setup Enzyme is quite easy: install react-dom , react-addons-test-utils then the enzyme packages and jest-serializer-enzyme . Add the serializer to package.json as follows:

Enzyme allows direct access to props and states of components. So we can create snapshots for multiple renderings in a component:

Component ReassignLocationMenu receives props count to determine how many items are added. This test will create two separate snapshots for each case (when count is 1 or 2).

With the previous test we cannot test both cases. Enzyme can do much more, learn more here .

III. Test render with component connected:

Our application uses react-redux to store local information, and most components are connected like this:

It’s quite strange when we create test render using shallow(<CameraSettings />) we will get the error: ” Invariant Violation: Could not find ‘store’ in either context or props of ‘Connect (CameraSettings) “. .. must do another way!

A temporary way is as follows (splitting the state) The old way is that we still do the same thing and export the component and import it into the test:

But this way must be written quite obtuse and therefore we have to manually add all the props from mapStateToProps, …

Moreover, if we change the state with any logic inside mapStateToProps we must also copy the logic into the test. This makes us vulnerable to error and unnecessary code duplication.

The more “good” way (using mock!) Instead of adding props, it is better to use mock to avoid duplication of code, plus we can test the function mapStateToProps! To mock state, we use mail redux-mock-store institute:

The step is as follows:

  1. The Component CameraSettings renders a switch button to toggle, representing the user’s will to save photos locally and open to camera . It takes the state value to render the switch button on or off.
  2. To include them in a mock store that our test suite can use, first we create initialState , then pass the function mockStore .
  3. Next, we pass the store mocked to the component that was connected by adding the function shallow: { context: { store: mockStore() } } .
  4. Finally, to render the snapshot for our connected component, use wrapper.dive() to access the actual output of the component for the snapshot. Note: we can use the wrapper.setContext() function to change state changes and test renderings as you like.

IV. It’s just the beginning …

This is the first thing I learned when deploying tests with Jest with React Native application. Hope these things will be more or less helpful to you ? I spent hours trying to polish and write it in an easy-to-understand way. You also spend a lot of time and effort to learn it. So I will try to write and explain more clearly in the following sections.

These are the things I will cover in the following sections:

  • Use jest command line without npm
  • Learn about test coverage reports
  • Mock the response from the API
  • Test the functions functions
  • Setup global mock
  • Best practice when mock
  • Test Touchable features and components …

Thank you for following this article. If you have comments, please leave a comment below ? !

Share the news now

Source : Viblo