Как шутить тест, если значок загружается правильно - PullRequest
0 голосов
/ 21 октября 2019

Я пишу тест с подходом 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>

Я думаю, что есть много дополнительной информации, ожидаемой и получаемой. Я действительно просто хочу проверить, рендерится ли конкретный значок или нет. В идеале стиль также должен быть проверен, но это не обязательно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...