玩笑和酶 - 如何测试子组件的属性功能（用于测试覆盖率）答案

【问题标题】：Jest and enzyme - how to test function that is property to child component (for test coverage)玩笑和酶 - 如何测试子组件的属性功能（用于测试覆盖率）
【发布时间】：2019-01-30 09:26:51
【问题描述】：

为了简化 - 我有一个组件，比如说<Label />，我正在这样使用它：

...
<Label
  labelText="Some text"
  renderText={(text) => {
    const cssClass = text.length < 5 ? 'one-class' : 'other-class';
    return <b className={cssClass}>{text}</b>;
  }}
/>
...

所以 - 我有一个属性，它是一个定义如何显示文本的函数。一切都很好，它正在工作。

但是，当我运行 jest --coverage 时 - 它显示设置 cssClass 的行未被发现。

如何测试那条线？

【问题讨论】：

你在测试conditional的两边吗？（在text.length 小于 5 和大于等于 5 时测试？）
问题是我不知道如何测试renderText 函数/属性。

标签： jestjs enzyme test-coverage

【解决方案1】：

有两种测试方法。您需要 2 个测试用例：一个用于 text.length< 5，另一个用于 text.length>= 5

第一个方法是使用mount()。在这里，您需要弄清楚 text 参数的来源（作为 props 传递给您的组件或方法）。然后你会得到<Label> 渲染成一些 或其他什么。你需要检查里面是否有text或text1

另一种方法是在您的组件上使用shallow()。然后你就可以明确地测试renderText：

it('renders label with text having length of 4', () => {
  const renderText = shallow(<YourComponent ... >).find(Label).props().renderText;
  expect(renderText('1234')).toEqual(<b className="one-class">1234</b>);
});

it('renders label with text having length of 5 or more', () => {
  const renderText = shallow(<YourComponent ... >).find(Label).props().renderText;
  expect(renderText('12345')).toEqual(<b className="other-class">12345</b>);
});

【讨论】：