Я пишу тест с подходом TDD, используя Jest и Enzyme. Я хочу проверить, правильно ли загружается определенный значок из 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>
Я думаю, что есть много дополнительной информации, ожидаемой и получаемой. Я действительно просто хочу проверить, рендерится ли конкретный значок или нет. В идеале стиль также должен быть проверен, но это не обязательно.