Question

我正在使用Jest和Enzyme用TDD方法编写测试。我想测试FontAwesome中的特定图标是否正确加载到我的应用程序中。我不确定要使用哪个函数来检查图标是否包含在特定的div中。

使用toContain似乎是不正确的，因为它主要用于文本。我还尝试记录该图标，但得到的文本块很大。

我在App.js中返回的代码如下：

    <div className={styles.root}>
        <header id="client-implementation-structure-header">Your implementation structure overview:</header>
        <div id="client-implementation-structure-body">
            <FontAwesomeIcon
              icon={faHospital}
              style={{ fontSize: "2rem", color: "#65cdae" }}
            />
        </div>
    </div>

并且我正在尝试测试faHospital图标是否正在加载。

我的App.test.js看起来像这样：

it('renders hospital icon', () => {
    const wrapper = mount(<ClientImplementationStructure />);
    const body = wrapper.find('#client-implementation-structure-body')
    expect(body).toContain(<FontAwesomeIcon
        icon={faHospital}
        style={{ fontSize: "2rem", color: "#65cdae" }}
    />);
});

我的测试失败，并被告知预期结果是：

<FontAwesomeIcon border={false} className="" fixedWidth={false} flip={null} 
icon={{"icon": [448, 512, [], "f0f8", "M128 244v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12
 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12zm140 12h40c6.627 0 12-5.373 12-12v-40c0
-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12zm-76 84v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm76 12h40c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12zm180 124v36H0v-36c0-6.627 5.373-12 12-12h19.5V85.035C31.5 73.418 42.245 64 55.5 64H144V24c0-13.255 10.745-24 24-24h112c13.255 0 24 10.745 24 24v40h88.5c13.255 0 24 9.418 24 21.035V464H436c6.627 0 12 5.373 12 12zM79.5 463H192v-67c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v67h112.5V112H304v24c0 13.255-10.745 24-24 24H168c-13.255 0-24-10.745-24-24v-24H79.5v351zM266 64h-26V38a6 6 0 0 0-6-6h-20a6 6 0 0 0-6 6v26h-26a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h26v26a6 6 0 0 0 6 6h20a6 6 0 0 0 6-6V96h26a6 6 0 0 0 6-6V70a6 6 0 0 0-6-6z"], "iconName": "hospital", "prefix": "far"}} inverse={false} listItem={false} mask={null} pull={null} pulse={false} rotation={null} size={null} spin={false} style={{"color": "#65cdae", "fontSize": "2rem"}} swapOpacity={false} symbol={false} title="" transform={null} />

收到的信息是：

      <div id="client-implementation-structure-body">
        <FontAwesomeIcon icon={{...}} style={{...}} border={false} className="" mask={{...}} fixedWidth={false} inverse={false} flip={{...}} listItem={false} pull={{...}} pulse={false} rotation={{...}} size={{...}} spin={false} symbol={false} title="" transform={{...}} swapOpacity={false}>          <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="hospital" className="svg-inline--fa fa-hospital fa-w-14 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style={{...}}>
            <path fill="currentColor" d="M128 244v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12zm140 12h40c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12zm-76 84v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm76 12h40c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12zm180 124v36H0v-36c0-6.627 5.373-12 12-12h19.5V85.035C31.5 73.418 42.245 64 55.5 64H144V24c0-13.255 10.745-24 24-24h112c13.255 0 24 10.745 24 24v40h88.5c13.255 0 24 9.418 24 21.035V464H436c6.627 0 12 5.373 12 12zM79.5 463H192v-67c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v67h112.5V112H304v24c0 13.255-10.745 24-24 24H168c-13.255 0-24-10.745-24-24v-24H79.5v351zM266 64h-26V38a6 6 0 0 0-6-6h-20a6 6 0 0 0-6 6v26h-26a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h26v26a6 6 0 0 0 6 6h20a6 6 0 0 0 6-6V96h26a6 6 0 0 0 6-6V70a6 6 0 0 0-6-6z" style={{...}} />
          </svg>
        </FontAwesomeIcon>
      </div>

我认为还有很多额外的期望和信息。我真的只是想检查一个特定的图标是否正在渲染。理想情况下，还应检查样式，但这不是必需的。

如何开玩笑测试图标是否正确加载

0 个答案: