How to create test on a non inline style CSS in a jest

Question

Is there a way to test a non inline style CSS color of the word 'Hello' in a jest?

.textStyle {
 color: red;
}

<p class="textStyle">Hello</p>

test('test text color', () => {
    const wrapper = mount(<React />);
    const p = wrapper.find('p').text();
    //insert code here
});

Ryan Le · Accepted Answer · 2021-09-16 08:53:05Z

2

For that, you would use a regular getBy or findBy or any selectors and use a toHaveStyle accordingly

expect(getByTestId('elementId')).toHaveStyle('color: red')

You will also need to install jest-dom to have toHaveStyle available

answered Sep 16, 2021 at 8:53

Ryan Le

8,5181 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

George Macarubbo III Over a year ago

is this applicable for testing external css styles?

Vintr · Accepted Answer · 2021-09-16 08:48:09Z

0

You might find some success with the window.getComputedStyle API. Calling this with an element gives you an object of that elements styles, which you can then verify have the correct values.

answered Sep 16, 2021 at 8:48

Vintr

4655 silver badges7 bronze badges

3 Comments

George Macarubbo III Over a year ago

is this applicable for testing external css styles?

Vintr Over a year ago

Yes, regardless of where the styles come from, this API will tell you which styles the element has applied to it right now. The same goes for the assertion suggested by Ryan Le, using jest-dom (it probably uses getComputedStyle in the background).

ProgramLover Over a year ago

No, it doesn't work for non inline styles. I tested and it doesn't work when style is declared in scss file. stackoverflow.com/questions/75777333/…

Collectives™ on Stack Overflow

How to create test on a non inline style CSS in a jest

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related