Day: October 8, 2024

Testing is an important part of any software development process. It helps you to ensure that your code is working as expected and that you are not introducing any bugs. In this article we will focus on unit testing by providing a simple example of how to test a React Native component.

Setting up the project

let’s create a simple React Native app and then we will add testing to it.

react-native init AwesomeProject

This will create a new  app in a folder called AwesomeProject. Now we can run the following command to start our app:
cd AwesomeProject && yarn start

Configuring the React Native Testing Library:

• Install Required Packages:
  Ensure you have Jest and React Native Testing Library installed in your project. If not, you can install them using npm or yarn:

@yarn add –dev babel/preset-react jest-environment-jsdom @babel/plugin-proposal-decorators @testing-library/jest-dom @testing-library/react-native

• Configuration:

Create a jest.config.js file in the root of your project and configure Jest:

module.exports = {
preset: "react-native",
testEnvironment: 'jest-environment-jsdom',
};

• Setting up Babel:

If you’re using Babel in your project, you might need to add some configuration to your .babelrc or babel.config.js file to make sure Jest can handle importing images and other assets in your tests. Here’s an example of what you might need to add to your Babel configuration:

module.exports = function (api) {
api.cache(false);
return {
presets: [
'module:metro-react-native-babel-preset',
'@babel/preset-env', 
'@babel/preset-react', 
"@babel/preset-typescript"
],
plugins: [
['react-native-reanimated/plugin'],
["@babel/plugin-transform-class-properties", { "loose": true }],
["@babel/plugin-transform-private-methods", { "loose": true }],
["@babel/plugin-transform-private-property-in-object", { "loose": true }],
["@babel/plugin-proposal-decorators", { "legacy": true }],
    ]
};
};

• Writing Your Tests:

With the setup done, you can now start writing tests for your React Native components using React Native Testing Library. Here’s a simple example of a test for a component :

• Steps.
  1. In the rood directory of the project create a folder name __tests__

2. In this file create test suits which are files with the testing code.

// App.test.js

import 'react-native';
import React from 'react';
import App from './../app/App';
import renderer from 'react-test-renderer';

// snapshot test
test('renders correctly', () => {
const snapshot = renderer.create(<App/>).toJSON();
expect(snapshot).toMatchSnapshot();
})

• Running Test Case:
  • yarn test –u  (this will create the new snapshot of the testcases or update the old test snapshots)

yarn test  (this will match the snapshot with the previous taken snapshot or print the result to console weather it pass or fails.

JEST Features:

• The coverage report
  The Jest coverage report provides detailed information on your test coverage. To show a coverage report in the console, you can simply use the –coverage flag when running the test. A table containing information about coverage is now shown in the console.

–coverage

–coverage –coverageDirectory=’coverage’
(create a visually appealing coverage report)

• % Stmts: Percentage of all instructions that were executed at least once by means of tests.
  • % Branch: Percentage of all branches whose conditions were fulfilled at least once by way of tests and thus passed.
  • % Funcs: Percentage of all instructions that were called at least once by means of tests.
  • % Lines: Percentage of all source code lines that were run at least once by way of tests.
• The watch plug-in
  • get quick feedback on code changes.
  • Jest can now be started with the CLI option –watch to only re-run tests affected by file changes.
  • ‘f’ only re-runs failed tests;
  • ‘u’ triggers an update of all failed snapshots; and
  • ‘i’ launches an interactive mode to update snapshots individually.
• Mocking
  • Mocking is a software development practice used in unit testing. It involves creating fake or mock versions of external dependencies (such as modules, objects, APIs, or databases) that your code under test relies on.
  • The main purposes of mocking are: Isolation, Control, Speed, Independence.
• Timer mocks
  • Timer mocks are a specific type of mocking used to control and simulate the behavior of timers, such as setTimeout, setInterval, and requestAnimationFrame, in a testing environment. These mocks allow you to test code that relies on timers without actually waiting for the real timers to elapse, which can significantly speed up your tests.
• Snapshot testing
  • Snapshot testing is a way to test React components by rendering the component, taking a “snapshot” of the rendered output, and comparing it with a previously approved snapshot. If the output matches the approved snapshot, the test passes; otherwise, it fails.
  • This is particularly useful when refactoring or making changes to existing components, as snapshot tests can catch regressions in the component’s output.

Types of Test Cases

• Unit Tests: Focus on testing individual components or functions in isolation. This is crucial for ensuring that each part of your application works as expected under controlled conditions.
  • Component Testing (Snapshot tests, prop and state changes, lifecycle methods)
  • Logic and Utility Testing (Pure functions, utility functions, business logic)

• Integration Tests: Test how different parts of your application work together. This could involve testing the integration between components or between components and external services.
  • Component Integration Testing (Testing interactions between parent and child components)
  • Redux and State Management Testing (Action creators, reducers, selectors, and integration with components)

• Snapshot Tests: As mentioned earlier, snapshot tests allow you to compare the current output of your components against a previously saved snapshot. This is particularly useful for catching unexpected changes in the UI.
• End-to-End (E2E) Tests: These tests simulate real user scenarios across the entire application. E2E testing is essential for ensuring that your application works seamlessly from start to finish.
• Other Tests:
  • API and Network Testing
  • Asynchronous Testing
  • Platform-specific Testing

References:

• Getting Started with React Native
• Testing Overview