React 应用程序中 Jest 和 Enzyme 的覆盖率答案

【问题标题】：Coverage in Jest and Enzyme in React aplicationReact 应用程序中 Jest 和 Enzyme 的覆盖率
【发布时间】：2018-12-19 13:38:29
【问题描述】：

我有一个 React 应用程序，我添加了带有 jest 和酶的测试。我对名为<Duration.jsx /> 的反应组件进行了单元测试。覆盖范围向我展示了<Duration.jsx /> 和 files.scss 中的所有组件覆盖范围。正常吗？

【问题讨论】：

【解决方案1】：

我认为这取决于您如何编写测试。恕我直言，覆盖率是测试的副产品。例如，如果您使用enzyme 和shallow(<LayoutMessage />)，那么您将不会渲染LayoutMessage 的子代。

如果您使用render(<LayoutMessage />) 正常渲染，那么您还将渲染LayoutMessage 的子级，从而增加您的测试执行的行数。

这是用于测试单个组件的示例图片。

【讨论】：

感谢您的回答。我用的是浅的。 const component = shallow(<Duration />);
我看不太清楚您的图像，但屏幕上的前两行似乎表明您正在运行两个测试文件。您可以在这些文件上发布文件内容吗？
是的，你是对的。我有两个测试，但第二个 <Duration.jsx /> 是问题所在。这是我的单元测试。 import React from 'react'; import { shallow } from 'enzyme'; import Duration from '../../Timer/Duration'; describe('Panel', () => { it('Edit product button should render correctly', () => { const component = shallow(<Duration />); expect(component.instance().isZeroOrEmpty('0')).toBe(true); }); });
酷，如果你确定是这个问题，你能帮我一个忙吗？组件初始化后打印出console.log(component.debug());。原因是我想看看是否为您的子组件生成了任何代码。发布 Duration.jsx 文件会很有帮助:)
这是控制台输出<TimeWrapper title="Duration"> <EmptyTime /> <Buttons onClickSetTime={[Function]} onBlur={[Function]} className="timer-button-duration" /> </TimeWrapper>