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>或其他任何形式呈现。并且您将需要检查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>);
});

玩笑和酵素-如何测试属于子组件的功能（用于测试范围）

1 个答案: