Question

我有一个接受道具的组件，叫做<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> ----My first step ----This is another ----And another ----second group ----second group 2 。我正在尝试测试几件事，但失败了。

基本上，我想检查是否存在我的属性，然后使用license或其他组件显示特定元素。我有几个。

这是我的测试，其中我尝试检查是否有class为真，然后应该显示Icon组件：

prop.license.expiredAt

但是我得到一个错误：

  it('expects to show LicenseInfo if license prop is true', () => {
    const props = {
      license: {
        clientId: '01',
        expiredAt: 1551391198000,
        isValid: true,     }
    };
    const wrapper = shallow(
      <LicenseInfo license={props.license}>
        <div>test</div>
      </LicenseInfo>
    );
    const html = wrapper.find(<Icon icon="test" />).html();
    expect(html).toContain(props.license.expiry);
  });
});

这是我的组件：

 FAIL  src/LicenseInfo/__tests__/index.test.tsx (8.156s)
  ● LicenseInfo Component › expects to show LicenseInfo if license prop is true

    Method “html” is meant to be run on 1 node. 0 found instead.

      30 |       </LicenseInfo>
      31 |     );
    > 32 |     const html = wrapper.find(<Icon icon="test" />).html();
         |                                                     ^
      33 |     expect(html).toContain(props.license);
      34 |   });
      35 | });

      at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1875:17)
      at ShallowWrapper.html (node_modules/enzyme/build/ShallowWrapper.js:1032:21)
      at Object.it (src/shared/common/components/panel/LicenseInfo/__tests__/index.test.tsx:32:53)

我真的是测试的新手，所以，如果我忘记了什么，请询问，我会提供。我很挣扎，想要一些帮助。

的解释

Answer 1

我建议使用快照测试来记录状态，而不要关注特定的属性。只是使用

expect(wrapper).toMatchSnapshot();

shallow也不会呈现子组件的DOM，因此也许您想使用mount来访问组件所生成的完整DOM（即使用选择器）。可能是因为您尝试在Icon上声明的属性并未呈现在浅层呈现中。

道具的酶/笑话测试失败

1 个答案: