Brook Preloader

Blog

React Native unit testing with Jest and Enzyme

Introduction : Jest+Enzyme

Testing means In general, testing is finding out how well something works. In terms of human beings, testing tells what level of knowledge. In computer hardware and software development, testing is used at key checkpoints in the overall process to determine whether objectives are being met.

Testing Advantages:

Reduces Defects in the Newly developed features or reduces bugs when changing the existing functionality.Improves design and allows better refactoring of code.

Image for post
Testing Diagram

Testing Techniques:

Black Box Testing — It is used to test the user interface of inputs and outputs.

White Box Testing — It is used to test the each function behavior.

Gray Box Testing — It is used to test the task, risks methods.

Test types:

1.Unit Test — It is a way to test the smallest components of your software, the smallest piece of code. A unit can be a single function.

2. Integration Test — Tests a function or component in their context. It should be possible to use it with other function(s) and component(s) in a group.

3. End-to-end Test — Tests the application in a real browser. Often it starts a browser, performs clicks and navigation, and asserts.

4. Snapshot Test — Snapshot test should be compare the previous snapshot with current snapshot.

5. Screenshot Test — screenshot tests can be used to diff two screenshots from the same application state to verify whether something styling, layout and UI has changed

Testing Tools:

  1. Mocha — Mocha is a popular test runner for a JavaScript application. It is often used in React applications,
  2. Chai — Chai is a popular assertion library. It gives you functions to make these assertions.
  3. Sinon — Sinon is a neat library for spies, stubs, and mocks.
  4. Enzyme — Enzyme is used test the class components.
  5. Jest — Jest is used to test the functional components.
  6. Cypress — Cypress is an E2E testing framework.
  7. Storyboard/Loki — Story Book is used test every component behavior.

Best framework to test the React native application is

Image for post
Jest+Enzyme

Jest — Jest is a JavaScript unit testing framework, used by Facebook to test services and React applications.Jest acts as a test runnerassertion library, and mocking library.

Enzyme — Enzyme, created by Airbnb, adds some great additional utility methods for rendering a component (or multiple components), finding elements, and interacting with elements.

Implementing Test case with Jest and Enzyme:

I have integrated both Jest & Enzyme to test the sample code. Below are the steps to integrate in react native and test the code.

Step 1:

Adding Jest to React native app:

  1. install the package by using below command — For our initial setup, we installed three libraries: jest, babel-jest, and react-test-renderer. Be sure to install these as devDependencies using either npm i — save-dev or yarn add -dev.
  2. Setup — Starting from react-native version 0.38, a Jest setup is included by default when running react-native init. The following configuration should be automatically added to your package.json file.

command : npm install — save-dev jest

Step 2:

Creating a test file — Create a ‘sample_test’ file in “_test_” folder

Step 3:

Adding Enzyme to React Native app:To get started with enzyme, you can simply install it via npm. You will need to install enzyme along with an Adapter corresponding to the version of react

  1. Add npm package with below command.

npm i — save-dev enzyme enzyme-adapter-react-16

2. Finally, you need to configure enzyme to use the adapter you want it to use. To do this, you can import the below packages.

import Enzyme from ‘enzyme’;

import Adapter from ‘enzyme-adapter-react-16’;

Enzyme.configure({ adapter: new Adapter() });

Step 4:

Implement sample code in “JS” file. please find sample code for testing.https://medium.com/media/16bbd2759fa8e6aa6cd422aa2c73304d

Steps 5:

Implement test file for above sample code.https://medium.com/media/951b8d286988ab0bffe029e2ad4245bb

Step 6:

Commands for test the files

Now to run our tests, we simply type npm test on our command line.

1. To test all file at a time use “npm test”

2. To test only one file use “npm test filename”

3. To test file with modified code use “npm test filename — -u”

Step 7:

Out put of test case will look like thishttps://medium.com/media/d810774cf5f13e505bf4d761dfbeb4bb

Conclusion:

You can perform React Native unit testing on an individual method, function, class, procedure, module, element, or object. you can validate that each unit of your React Native code performs as expected.

0 0 vote
Rating
guest
0 Comments
Inline Feedbacks
View all comments