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

我想对我的项目有100％的覆盖率。测试一个create-react-app index.js文件

为了做到这一点，我需要测试我的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); 
});

来源

2017-03-27 Thomas Sauvajon

的主要问题是要测试那里。如果你想测试你的代码的工作是否正确，写一个间谍ReactDOM.render和嘲笑document.getElementById('root')的单元测试。因为这是您所有的代码，请使用我们的应用程序组件和特定的div调用ReactDOM.render。

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

如果你想测试应用真正开始在你的页面，你应该写集成测试与硒或Nightwatch.js

只得到通过增加它100％的覆盖率也可以忽略这个文件在你开玩笑设置coveragePathIgnorePatterns

来源

2017-03-27 11:25:51

我想要做的是要么忽略笑话覆盖index.js，或实际上有我的索引文件的测试，以便有来自开玩笑--coverage 100％的覆盖率。将'coveragePathIgnorePatterns“：[”src/index.js“]'添加到'package.json'不起作用... –

更新我的答案，即使我认为100％的覆盖率不应该成为测试的目标。 –

'react-scripts test --env = jsdom --coverage --collectCoverageFrom = src/**/*。js？--collectCoverageFrom =！src/index.js' works，but directly'collectCoverageFrom' in'package .json'不起作用 'coveragePathIgnorePattern'似乎根本不起作用...... –

如果你的项目100％的覆盖率是你的目标和你的index.js文件中的代码是微不足道的，那么它可能是排除从覆盖报告的文件一个不错的选择，如安德烈亚斯Köberle在他的回答中指出。

创建反应的应用内目前仅支持在玩笑配置这四个键（source）：

collectCoverageFrom
coverageReporters
coverageThreshold
snapshotSerializers

这就是为什么

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

将不起作用。

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

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

在图像下面你看到这段代码的测试运行的输出添加到初始的应用程序与创建创建package.json -react-app v1.4.3。请注意，index.js文件不再显示在报告中，也不会影响覆盖百分比。

来源

2018-03-05 12:26:08 dcastil

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

回答

相关问题