Reactjs 测试create react app index.js文件

我想对我的项目有100%的覆盖率

为此，我需要测试我的index.js文件，它非常基本：

index.js

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

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

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

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

然后测试它：

index.test.js

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

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

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

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

导入

索引时出错

： 不变冲突：_registerComponent（…）：目标容器不是DOM元素

附言：

请注意，我已经完成了以下测试，工作正常：

App.test.jsx

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

it（'呈现而不崩溃'，（）=>{
const div=document.createElement（'div'）；
ReactDOM.render（，div）；
});

主要问题是您想在那里测试什么。如果您想测试您的代码是否正常工作，请编写一个单元测试，在

ReactDOM.render

和mock

document.getElementById（'root'）

上进行监视。因为这就是你的代码所做的，调用

ReactDOM.render

，使用我们的应用程序组件和特定的

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

从“react dom”导入ReactDOM；
...
mock（'react-dom'，（）=>（{render:jest.fn（）}））
它（'渲染而不崩溃'，（）=>{
const div=document.createElement（'div'）；
render（在您的jest设置中
如果您的目标是项目的100%覆盖率，并且
index.js
文件中的代码微不足道，那么从覆盖率报告中排除该文件可能是一个不错的选择，正如Andreas Köberle在回答中指出的那样

Create react app当前仅支持Jest配置（）中的这四个键：








这就是为什么

coveragePathIgnorePatterns:[“src/index.js”]

不行

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

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

在下图中，您可以看到测试运行的输出，该代码添加到使用create react app v1.4.3创建的初始应用的
package.json
。请注意，
index.js
文件不再显示在报告中，也不会影响覆盖率

我找到了一个解释如何编写测试的方法

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

//index.js
从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
导出默认的ReactDOM.render(
,
document.getElementById（'root'）| | document.createElement（'div'））
);
我就是这样测试index.js的

index.js
从“React”导入React；
从“react dom”导入react dom；
从“/App”导入应用程序；
render（，document.getElementById（“根”））；

index.test.js
从“React”导入React；
从“react dom”导入react dom；
从“/App”导入应用程序；
mock（“react dom”，（）=>（{render:jest.fn（）}））；
描述（“应用程序根目录”，（）=>{
它（“应该在不崩溃的情况下渲染”，（）=>{
const div=document.createElement（“div”）；
div.id=“root”；
文件.正文.附件（div）；
要求（“./index.js”）；
expect（ReactDOM.render）.tohavencalledwith（，div）；
});
});
以下是如何跳过TypeScript项目中的这些琐碎文件：

编辑
package.json
在根级别添加以下代码段

{
  ...rest of existing props,
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{ts,tsx}",
      "!src/serviceWorker.ts",
      "!src/index.tsx"
    ]
  }
}


保存并重新运行覆盖率

到目前为止，覆盖率应该更高。
这里是我所做的，看起来它工作得非常完美（100%覆盖率，应用程序不会中断）：

我想做的是忽略jest覆盖范围中的index.js，或者实际对我的索引文件进行测试，以便jest--coverage.adding
coveragePathIgnorePatterns:[“src/index.js”]
to
package.json
不起作用…更新我的答案，甚至我会说100%的覆盖率不应该是测试的目标。
react scripts test--env=jsdom--coverage--collectCoverageFrom=src/***/.js？--collectCoverageFrom=！src/index.js
起作用，但在
package.jso中直接设置
collectCoverageFrom
n
不起作用。
coveragePathIgnorePattern
似乎根本不起作用…@ThomasSauvajon包括
coveragePathIgnorePatterns
似乎与
react脚本：1.0.17
配合得很好（包括react v16）CreateReactApp应用程序不支持coveragePathIgnorePatterns改用collectCoverageFrom.dam--真希望我能让它工作。我一直得到
null
作为
div
@rpivovar的值，你是说
document.createElement（“div”）
返回
null
？如果您使用的是React strict模式，请记住将包装器也添加到测试文件：
。toHaveBeenCalledWith（，div）
否则您将收到
测试失败。测试主体中的第二行看起来很有希望。但是，在第一行中，您基本上做了预期的事情，因此第二行显然是正确的。您正在测试您的测试。；）删除第一行并让实现的代码执行该调用如何，这样您的测试将实际测试实现而不是它本身。。。
// src/index.spec.js
/* eslint-env jest */
import React from 'react'
import ReactDOM from 'react-dom'
import { ReactStrictMode, rootElement } from './index'

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

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