测试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时出错： 不变违规：_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配置中的这四个键（source）：

collectCoverageFrom
coverageReporters
coverageThreshold
snapshotSerializers

这就是为什么

  

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

无效。

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

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

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

Answer 2

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

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

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

Answer 3

这就是我测试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 4

我发现article online解释了这种写测试的方式...

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

在dcastil's answer上进行扩展，以下是跳过TypeScript项目的这些琐碎文件的方法：

1. 编辑package.json

2. 在根级别添加以下代码段

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

3. 保存并重新运行报道

现在覆盖率应该更高。

Answer 6

这是我所做的，看起来很不错（100％覆盖率，应用程序没有损坏）：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import './index.css';

export const ReactStrictMode = <React.StrictMode>
  <App />
</React.StrictMode>

export const rootElement = document.getElementById('root')

ReactDOM.render(
  ReactStrictMode,
  rootElement
);

，然后在index.spec.js中：

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