I am trying to write a unit test in react with enzyme. You can see the test code below.
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');
});
I have set a background color to the HTML element and I am trying to validate the element has the right color. But style value is undefined and I could not reach the background.
The error message:
TypeError: Cannot read property 'backgroundColor' of undefined
I could not understand what is wrong. When I check the backgroundColor of the element with chrome developer tools, I could see that there is a background value.
What might cause the problem? I would appreciate if you share your comments!
thanks in advance!
P.S. : I realized that when I used inline style, it worked! So I am curious how can I test the style in a css file! If it is not possible to tests in the css file, maybe I should avoid defining styles in a seperate css files. What is the best practice to manage style is React?