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

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

CodePudding user response：

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

CodePudding user response：

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.