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

user_16043530 0
Viewed 180

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
});
react-testing-library reactjs unit-testing css javascript
2 Answers

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

user_51226150

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.

user_68298410
Related