Javascript 道具的酶/Jest试验失败

我有一个接受道具的组件，名为

license

。我正在尝试测试一些东西，但我失败了

基本上，我想检查我的属性是否存在，然后用

class

或其他组件显示一个特定的元素。我有一些

这是我的测试，在测试中，我尝试检查如果我的

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);
  });
});

it（'如果许可证属性为true，则期望显示LicenseInfo'，（）=>{
常量道具={
许可证：{
客户ID:'01'，
截止日期：1551391198000，
isValid:true，}
};
常数包装=浅(
测试
);
const html=wrapper.find（）.html（）；
expect（html）.toContain（props.license.expiration）；
});
});

但我有一个错误：

 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)

未能通过src/LicenseInfo/___测试/index.test.tsx（8.156s）
● LicenseInfo组件›希望在license prop为true时显示LicenseInfo
方法“html”将在1个节点上运行。改为找到0。
30 |       
31 |     );
>32 | const html=wrapper.find（）.html（）；
|                                                     ^
33 | expect（html）.toContain（道具许可证）；
34 |   });
35 | });
在shallowRapper.single（node_modules/enzyme/build/shallowRapper.js:1875:17）
在shallowRapper.html（node_modules/enzyme/build/shallowRapper.js:1032:21）
在Object.it（src/shared/common/components/panel/LicenseInfo/__-tests\u_/index.test.tsx:32:53）

这是我的组成部分：

/* eslint-disable react/default-props-match-prop-types */
import React, { Fragment } from 'react';
import moment from 'moment';
import ILicense from 'dto/ILicense';

import PageHeader from 'components/PageHeader';
import Icon from 'components/Icon';

export interface Props {
  license: ILicense;
}

// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
const LicenseInfo = <T extends object>({ license }: Props & T) =>(
  <Fragment>
    {license ? (
      <Fragment>
        <div className="container mt-5">
          <PageHeader className="font-weight-bold">License Information</PageHeader>
          <div className="container bg-white">
            <div className="py-5 ml-3">
              {license.expiredAt ? (
                <div className="mb-5">
                  <Icon icon="check" className="fa-lg text-success" />
                  Your License is Valid
                </div>
              ) : (
                <div className="mb-5">
                  <Icon icon="exclamation-circle" className="fa-lg text-danger" />
                  YourLicense has expired
                </div>
              )}
              <table className="table col-6">
                <tbody>
                  <tr>
                    <td>Valid Until:</td>
                    <td className="font-weight-bold">
                      {moment(license.expiredAt).format('YYYY-MM-DD HH:mm:ss')}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </Fragment>
    ) : null}
  </Fragment>
);

LicenseInfo.defaultProps = {
  clientId: '',
  expiredAt: null,
  isValid: false,
};

export default LicenseInfo;

/*eslint禁用反应/默认道具匹配道具类型*/
从“React”导入React，{Fragment}；
从“力矩”中导入力矩；
从“dto/ILicense”进口ILicense；
从“组件/PageHeader”导入PageHeader；
从“组件/图标”导入图标；
导出接口道具{
许可证：爱立信；
}
//eslint禁用下一行@typescript eslint/显式函数返回类型
const LicenseInfo=（{license}:Props&T）=>(
{许可证(
许可证信息
{license.expiredAt(
你的执照是有效的
) : (
你的驾照过期了
)}
有效期至：
{矩（license.expiredAt）.format（'YYYY-MM-DD HH:MM:ss'）}
)：null}
);
LicenseInfo.defaultProps={
客户端ID:“”，
expiredAt:null，
isValid:false，
};
导出默认许可证信息；

---

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

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

expect(wrapper).toMatchSnapshot();

---

此外，

shallow

不会呈现子组件的DOM，因此您可能希望使用

mount

来访问组件生成的完整DOM（即使用选择器）。可能是您试图在图标上声明的属性没有在浅层渲染上渲染。

我读过关于快照的文章，但我们决定不使用它们。。。啊，当然。完全忘记了。。。。我会试试看，如果能解决的话，我会投赞成票。。。非常感谢。