get HTML element style in react enzyme unit test

Viewed 3477

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?

0 Answers
Related