Question

我不是单元测试的新手，有一个功能组件，我已经为此编写了一些测试用例，但是无法获得有关玩笑和酶的完整测试报道。除了功能覆盖之外，其他所有我测试过的覆盖 npm test -- --coverage。我已经在代码段中添加了test coverage命令和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>

Answer 1

@RenJith-

对不起，这是来回的。我正在寻找的Instabul结果如下图所示；但是，您应该使用一些其他符号来指示是什么原因导致了您遇到的结果：

我认为，一旦您可以直观看到结果，您就可以找出缺少的覆盖范围。另外，我也不希望获得100％的覆盖率，而是要确保您正在正确地测试功能。可以得到100％但没有良好的测试：）

找到文件并在浏览器中打开：例如，URL看起来像：

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

如何获得React代码的完整测试范围

1 个答案: