Jest and enzyme - 如何测试 属性 到子组件的功能（用于测试覆盖率）

Question

为了简化 - 我有一个组件，比如说 <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 的行未被覆盖。

我如何测试该线路？

Answer 1

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

第一个方法正在使用 mount()。在这里你需要弄清楚 text 参数来自哪里（作为 props 传递给你的组件或者是什么方式）。然后你会得到 <Label> 呈现在一些 <span> 或其他什么。你需要检查里面是否有 <b class='one-class'>text</b> 或 <b class='other-class'>text1</b>

另一种方法是在您的组件上使用 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>);
});