文章/答案/技术大牛

发布

社区首页 >问答首页 >如何获得react代码的完整测试覆盖率

问如何获得react代码的完整测试覆盖率
EN

Stack Overflow用户

提问于 2019-08-24 11:07:07

回答 1查看 3K关注 0票数 3

我是单元测试的新手，有一个功能组件，我已经为它写了一些测试用例，但无法使用jest和酶获得完整的测试覆盖率。除了函数复盖之外，我用npm test -- --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>

reactjs

testing

jestjs

enzyme

回答 1

Stack Overflow用户

发布于 2019-08-24 12:43:41

@RenJith -

抱歉，这件事来来回回。我正在寻找的Instabul结果类似于下面的图像；但是，您的结果应该有一些额外的符号，表明是什么导致了您正在经历的结果：

我觉得，一旦你能够可视化结果，你可能就能够找出缺失的覆盖率。此外，我不会渴望获得100%的覆盖率，而是要确保您正在准确地测试功能。有可能得到100%的测试，但没有好的测试:)

找到文件并在浏览器中打开:例如，url将如下所示：

file:///<some local path>/coverage/lcov-report/src/containers/audience/targetAudience.html

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57634808

复制

相似问题

问如何获得react代码的完整测试覆盖率
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获得react代码的完整测试覆盖率EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获得react代码的完整测试覆盖率
EN