Как протестировать стиль внутри класса CSS для компонента React с помощью Jest и Enzyme?

Рассмотрим в CSS,

.content
{
    width:500px;
    box-sizing: border-box;
}

Я добавил этот класс css внутри компонента реакции следующим образом:

const Banner = () => {
   return (<div className="content">This is message content</div>);
}

Как написать тестовые примеры для шуток и энтузиастов, чтобы обеспечить правильное применение 'box-sizing' с 'border-box'?

Примечания. Я могу написать тестовый пример, чтобы убедиться, что класс ".content" добавлен к этому элементу. Но именно мне нужно написать тестовый пример, чтобы убедиться, что значение в 'box-sizing'.


reactjs jestjs enzyme
person BALA MURUGAN    schedule 26.12.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я не знаю, как решить вашу проблему, но имейте в виду, что ваш тест не будет охватывать

* {
  box-sizing: border-box;
}

если вы будете определены где-то еще.

С моей точки зрения, нет смысла тестировать стили, потому что мы не можем гарантировать с точки зрения тестирования, что элемент будет выглядеть так, как мы хотим. Так что вам все равно нужно будет открыть браузер и проверить, правильно ли работает ваш элемент, но вы пишете тесты, чтобы этого избежать.

person Krystian Sztadhaus    schedule 26.12.2019

arrow_upward
0
arrow_downward

Добавив этот код в файл Banner.test.js, он проверит, имеет ли className с именем content свойство встроенного стиля для box-sizing и равно ли оно border-box или нет. Но он будет тестировать только встроенные стили.

const banner = shallow(<Banner/>);
it("render propperely", () => {
expect(banner).toMatchSnapshot();
expect(banner.find(".content")
.get(0).props.style).toHaveProperty("box-sizing", "border-box");
  });
person ali sasani    schedule 26.12.2019
comment
Пожалуйста, обновите свой ответ, чтобы предоставить контекст на простом английском языке - person Mehdi LAMRANI; 26.12.2019
comment
Можете ли вы немного объяснить, как этот ответ решит проблему, вместо того, чтобы публиковать ответ только для кода. - person Arun Vinoth; 26.12.2019