How to write React-jest testing

Question

Following is my index.js file. There I want to test whether the app is render without crashing.

import ReactDOM from 'react-dom';
import { StrictMode } from 'react';

import App from './App';
import './index.scss';

ReactDOM.render(
   <StrictMode>
     <App />
   </StrictMode>,
  document.getElementById('root')
);

The index.test.js file that i have written is given below. Even though the test is passed it has an uncovered line.

/* eslint-env jest */
import ReactDOM from 'react-dom';
import { StrictMode } from 'react';

jest.mock('react-dom', () => ({ render: jest.fn() }));

describe('index.js', () => {
   it('renders without crashing', () => {
     ReactDOM.render(StrictMode);
     expect(ReactDOM.render).toHaveBeenCalledWith(StrictMode);
   });
});

Line 1 is noted as uncovered.

    import ReactDOM from 'react-dom';

So can you help me to improve the test case for the line.

This won’t test if it renders without crashing; nothing is being rendered. This tests if render was called with the StrictMode component, and nothing else. — Dave Newton, Dec 22 '21 at 05:49

score 1 · Answer 1 · answered Dec 22 '21 at 06:27

It's better to test the output of the render instead of mocking and testing the implementation detail. Since the code inside index.js will execute immediately when you import/require this module. We need a setup test environment before importing the module. For more info, see testing-recipes

index.jsx:

import ReactDOM from 'react-dom';
import React from 'react';
import { StrictMode } from 'react';

import App from './App';

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById('root')
);

App.jsx:

import React from 'react';

export default function App() {
  return <div>app</div>;
}

index.test.jsx:

import { unmountComponentAtNode } from 'react-dom';
import { act } from 'react-dom/test-utils';

describe('70444704', () => {
  let container = null;
  beforeEach(() => {
    container = document.createElement('div');
    container.id = 'root';
    document.body.appendChild(container);
  });

  afterEach(() => {
    unmountComponentAtNode(container);
    container.remove();
    container = null;
  });
  test('should pass', () => {
    act(() => {
      require('./');
    });
    expect(container.textContent).toBe('app');
  });
});

Test result:

 PASS  examples/70444704/index.test.jsx (12.701 s)
  70444704
    ✓ should pass (599 ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 App.jsx   |     100 |      100 |     100 |     100 |                   
 index.jsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        14.396 s

package versions:

"react": "^16.14.0",
"react-dom": "^16.14.0",
"jest": "^26.6.3",

How to write React-jest testing

1 Answers1