Test a create-react-app index.js file

Question

I would like to have 100% coverage on my project.

In order to do so, I need to test my index.js file which is very basic :

index.js

import React from 'react';
import ReactDOM from 'react-dom';

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

I can't find how to test this. When creating a function such as :

index.js

const index = (div) => {
  ReactDOM.render(<App />, div || document.getElementById('root'));
};

and then testing it :

index.test.js

it('renders without crashing', () => {
  const div = document.createElement('div');
  index(div);
});

I get an error when importing index: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

PS:

Note that I already have the following test, working perfectly :

App.test.jsx

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App/>, div);
});

Answer 1

If 100% coverage on your project is your goal and the code in your index.js file is trivial, then it might be a good option to exclude the file from the coverage report, as Andreas Köberle points out in his answer.

Create-react-app currently only supports these four keys in the Jest configuration (source):

collectCoverageFrom
coverageReporters
coverageThreshold
snapshotSerializers

This is why

coveragePathIgnorePatterns": ["src/index.js"]

won't work.

Add following code to the most outer scope of your package.json file:

"jest": {
  "collectCoverageFrom": [
    "src/**/*.{js,jsx}",
    "!src/index.js"
  ]
}

In the image below you see the output of a test run with this code added to the package.json of the initial app created with create-react-app v1.4.3. Note that the index.js file doesn't show up in the report anymore and also doesn't affect the coverage percentage.

Answer 2

This is how I've tested index.js

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

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

index.test.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

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

describe("Application root", () => {
  it("should render without crashing", () => {
    const div = document.createElement("div");
    div.id = "root";
    document.body.appendChild(div);
    require("./index.js");
    expect(ReactDOM.render).toHaveBeenCalledWith(<App />, div);
  });
});

Answer 3

The main question is what you want to test there. If you want to test that your code works correct, write a unit test that spies on ReactDOM.render and mocks document.getElementById('root'). Cause this is all your code does, calling ReactDOM.render with our App component and a specific div.

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


it('renders without crashing', () => {

  const div = document.createElement('div');
  ReactDOM.render(<App/>, div);
  global.document.getElementById = (id) => id ==='root' && div
  expect(ReactDOM.render).toHaveBeenCalledWith(...)
});

If you want test that the app really starts in your page, you should write integration test with Selenium or Nightwatch.js

To just get 100% coverage you can also ignore this file by adding it to the coveragePathIgnorePatterns in your jest settings