web-dev-qa-db-fra.com

Testez un fichier index.js create-react-app

J'aimerais avoir une couverture à 100% sur mon projet.

img

Pour ce faire, je dois tester mon fichier index.js qui est très basique:

index.js

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

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

Je ne trouve pas comment tester cela. Lors de la création d'une fonction telle que:

index.js

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

puis le tester:

index.test.js

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

J'obtiens une erreur lors de l'importation de index: violation invariante: _registerComponent (...): le conteneur cible n'est pas un élément DOM.

PS:

Notez que j'ai déjà le test suivant, qui fonctionne parfaitement:

App.test.jsx

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App/>, div);
});
reactjsreact-jsxjestjs
24
Thomas Sauvajon

La principale question est de savoir ce que vous voulez tester là-bas. Si vous voulez tester que votre code fonctionne correctement, écrivez un test unitaire qui espionne ReactDOM.render Et se moque de document.getElementById('root'). Parce que c'est tout ce que fait votre code, en appelant ReactDOM.render Avec notre composant App et un div spécifique.

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(...)
});

Si vous voulez tester que l'application démarre vraiment dans votre page, vous devez écrire un test d'intégration avec Selenium ou Nightwatch.js

Pour obtenir une couverture à 100%, vous pouvez également ignorer ce fichier en l'ajoutant à coveragePathIgnorePatterns dans vos paramètres de plaisanterie

9
Andreas Köberle

Si la couverture à 100% de votre projet est votre objectif et le code dans votre index.js le fichier est trivial, alors ce pourrait être une bonne option pour exclure le fichier du rapport de couverture, comme Andreas Köberle le souligne dans sa réponse.

Create-react-app ne prend actuellement en charge que ces quatre clés dans la configuration Jest ( source ):

collectCoverageFrom
coverageReporters
coverageThreshold
snapshotSerializers

C'est pourquoi

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

ne fonctionnera pas.

Ajoutez le code suivant à l'étendue la plus externe de votre package.json fichier:

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

Dans l'image ci-dessous, vous voyez la sortie d'un test avec ce code ajouté au package.json de l'application initiale créée avec create-react-app v1.4.3. Notez que le index.js le fichier n'apparaît plus dans le rapport et n'affecte pas non plus le pourcentage de couverture.

Coverage report

20
dcastil

Voici comment j'ai testé 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);
  });
});
6
Shiraz

J'ai trouvé un article en ligne qui explique comment écrire le test ...

// index.test.js
import Index from './index.js';

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

Modifiez maintenant le fichier index.js en conséquence:

// 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')
);
6
Erik Grosskurth