测试create-react-app index.js文件

Question

我想对我的项目有100%的报道.

为了做到这一点,我需要测试我的index.js文件,这是非常基本的:

index.js

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

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

我找不到如何测试这个.创建函数时,例如:

index.js

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

然后测试它:

index.test.js

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

导入时出错index:Invariant Violation:_registerComponent(...):目标容器不是DOM元素.

PS:

请注意,我已完成以下测试:

App.test.jsx

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

Answer 1

如果您的项目的100%覆盖率是您的目标,并且您的index.js文件中的代码是微不足道的,那么从覆盖率报告中排除该文件可能是一个不错的选择,正如AndreasKöberle在他的回答中指出的那样.

Create-react-app目前仅支持Jest配置中的这四个键(源):

collectCoverageFrom
coverageReporters
coverageThreshold
snapshotSerializers

这就是为什么

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

不行.

将以下代码添加到package.json文件的最外层范围:

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

在下图中,您将看到测试运行的输出,此代码已添加到package.json使用create-react-app v1.4.3创建的初始应用程序中.请注意,该index.js文件不再显示在报告中,也不会影响覆盖率百分比.

Answer 2

主要问题是你想在那里测试什么.如果您想测试您的代码是否正常,请编写一个间谍ReactDOM.render和模拟的单元测试document.getElementById('root').因为这是你的所有代码所做的,ReactDOM.render使用我们的App组件和特定的调用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(...)
});

如果您想测试应用程序真正在您的页面中启动,您应该使用Selenium或Nightwatch.js编写集成测试

要获得100%的覆盖率,您还可以通过将其添加到coveragePathIgnorePatterns您的jest设置中来忽略此文件

Answer 3

我在网上找到了一篇文章，解释了这种编写测试的方式...

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

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

现在，相应地更改index.js文件：

// 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

这就是我测试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);
  });
});