CODEWITHSUNDEEP
javascriptcssreactjsunit-testingreact-testing-library
George Macarubbo III
George Macarubbo III

Reputation: 23

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

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
});

Upvotes: 2

Views: 716

Answers (2)

Ryan Le
Ryan Le

Reputation: 8422

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

Upvotes: 2

Vintr
Vintr

Reputation: 445

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.

Upvotes: 0

Related Questions