Я пытаюсь написать юнит-тест в реакции с ферментом. Вы можете увидеть тестовый код ниже.
describe("When list page is opened", () => {
let wrapper;
beforeAll(() => {
wrapper = mount(<PersonList {...data}/>);
});
it('should have grey background color', () => {
console.log(wrapper.find('div.profile-card').props().style);
expect(wrapper.find('div.profile-card').props().style.backgroundColor).toBe('red');
});
Я установил цвет фона для элемента HTML, и я пытаюсь проверить правильность цвета элемента. Но значение стиля не определено, и я не смог добраться до фона.
Сообщение об ошибке:
TypeError: Невозможно прочитать свойство 'backgroundColor' из неопределенного
Я не мог понять, что не так. Когда я проверял backgroundColor элемента с помощью инструментов разработчика Chrome, я мог видеть, что есть фоновое значение.
Что может вызвать проблему? Буду признателен, если вы поделитесь своими комментариями!
спасибо заранее!
P.S. Я понял, что когда я использовал встроенный стиль, это сработало! Поэтому мне интересно, как я могу проверить стиль в файле CSS! Если невозможно выполнить тестирование в файле CSS, возможно, мне следует избегать определения стилей в отдельных файлах CSS. Какая лучшая практика для управления стилем - это React?