Check index.js file to create-response-application

Question

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

To do this, I need to check the index.js file, which is very simple:

index.js

 import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(<App/>, document.getElementById('root')); 

I can not find how to check this. When creating a function, for example:

index.js

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

and then check it out:

index.test.js

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

I get an error when importing index : Invariant violation: _registerComponent (...): The target container is not a DOM element.

PS:

Please note that I already have the following test that works perfectly:

App.test.jsx

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

Answer 1

The main question is: what do you want to check there? If you want to verify that your code is working correctly, write a unit test that spies on ReactDOM.render and checks document.getElementById('root') . Because this is all your code does by calling ReactDOM.render with our application component and 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 to check whether the application really runs on your page, you should write an integration test with Selenium or Nightwatch.js

To get 100% coverage, you can also ignore this file by adding it to coveragePathIgnorePatterns in the joke settings.

Answer 2

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

Currently, the Create-response-application application only supports these four keys in the Jest configuration ( source ):

collectCoverageFrom
coverageReporters
coverageThreshold
snapshotSerializers

That's why

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

will not work.

Add the following code to the outermost area of ​​your package.json file:

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

In the image below, you see the results of a test run with this code added to the package.json original application created using create-respond-application v1.4.3. Please note that the index.js file index.js no longer displayed in the report, and also does not affect the percentage of coverage.

Answer 3

I found an article on the Internet that explains this way of writing a test ...

 // index.test.js import Index from './index.js'; it('renders without crashing', () => { expect(JSON.stringify( Object.assign({}, Index, { _reactInternalInstance: 'censored' }) )).toMatchSnapshot(); }); 

Now modify the index.js file accordingly:

 // index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; export default ReactDOM.render( <App />, document.getElementById('root') || document.createElement('div') ); 

Answer 4

This is how I 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); }); });