我是单元测试的新手，有一个功能组件，我已经为其编写了一些测试用例，但无法使用 jest 和 enzyme 获得完整的测试覆盖率。除了功能覆盖之外，我测试过的都涵盖了
npm 测试 -- --coverage 。我在代码片段中添加了测试覆盖命令和测试覆盖 html
const TargetAudience = ({ searchResults }) => (
<React.Fragment>
<div className="target-audience-header">Target Audience</div>
{searchResults.length > 0 ?
<Table columns={columns} dataSource={data} />
:
null
}
</React.Fragment>
);
describe('search results props test', () => {
it('expect to render targetAudience component with search results props length > 0 ', ()=> {
const searchRes = ['a', 'b'];
expect(shallow(<TargetAudience searchResults={searchRes} />)).toMatchSnapshot();
})
it('expect to render targetAudience component with search results props length = 0', () => {
const searchRes = [];
expect(shallow(<TargetAudience searchResults={searchRes} />)).toMatchSnapshot();
})
})
describe('test the table component', () => {
it('expect to render table component when searchResults props has some
values ', ()=> {
const searchRes = ['a', 'b'];
const wrapper = shallow(<TargetAudience searchResults={searchRes} />)
expect(wrapper.find('Table').length).toBe(1);
expect(wrapper.find('.target-audience-header').length).toBe(1)
})
it('render date input correctly with null value', () => {
const searchRes = [1, 2];
const columns = {};
const wrapper = shallow(<TargetAudience searchResults={searchRes} />);
expect(wrapper.find('Table').props().columns).toBe({});
});
})
测试覆盖率是:
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
src/containers/audience/targetAudience | 80 | 100 | 50 | 80 | |
index.js | 80 | 100 | 50 | 80 | 9 |
<!doctype html>
<html lang="en">
<head>
<title>Code coverage report for src/containers/audience/targetAudience</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="..\..\..\..\prettify.css" />
<link rel="stylesheet" href="..\..\..\..\base.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type='text/css'>
.coverage-summary .sorter {
background-image: url(..\..\..\..\sort-arrow-sprite.png);
}
</style>
</head>
<body>
<div class='wrapper'>
<div class='pad1'>
<h1>
<a href="..\..\..\..\index.html">All files</a> src/containers/audience/targetAudience
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">80% </span>
<span class="quiet">Statements</span>
<span class='fraction'>4/5</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Branches</span>
<span class='fraction'>2/2</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">50% </span>
<span class="quiet">Functions</span>
<span class='fraction'>1/2</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">80% </span>
<span class="quiet">Lines</span>
<span class='fraction'>4/5</span>
</div>
</div>
</div>
<div class='status-line high'></div>
<div class="pad1">
<table class="coverage-summary">
<thead>
<tr>
<th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
<th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
<th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
<th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
<th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
<th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
<th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
<th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
<th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
<th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
</tr>
</thead>
<tbody><tr>
<td class="file high" data-value="index.js"><a href="index.js.html">index.js</a></td>
<td data-value="80" class="pic high"><div class="chart"><div class="cover-fill" style="width: 80%;"></div><div class="cover-empty" style="width:20%;"></div></div></td>
<td data-value="80" class="pct high">80%</td>
<td data-value="5" class="abs high">4/5</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="2" class="abs high">2/2</td>
<td data-value="50" class="pct medium">50%</td>
<td data-value="2" class="abs medium">1/2</td>
<td data-value="80" class="pct high">80%</td>
<td data-value="5" class="abs high">4/5</td>
</tr>
</tbody>
</table>
</div><div class='push'></div><!-- for sticky footer -->
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Sat Aug 24 2019 09:12:32 GMT+0530 (India Standard Time)
</div>
</div>
<script src="..\..\..\..\prettify.js"></script>
<script>
window.onload = function () {
if (typeof prettyPrint === 'function') {
prettyPrint();
}
};
</script>
<script src="..\..\..\..\sorter.js"></script>
</body>
</html>最佳答案
@RenJith -
抱歉，这是来来回回。我正在寻找的 Instabul 结果如下图所示；然而，您应该有一些额外的符号来表明是什么导致了您遇到的结果:
我觉得一旦您能够将结果可视化，您就可以找出缺少的覆盖范围。此外，我不希望获得 100% 的覆盖率，而是确保您准确地测试功能。有可能获得 100% 但没有好的测试:)
找到文件并在浏览器中打开:例如 url 看起来像这样:
file:///<some local path>/coverage/lcov-report/src/containers/audience/targetAudience.html
关于reactjs - 如何获得 react 代码的完整测试覆盖率，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57634808/