Comment créer un test sur un style CSS non inline dans un jest ?

Question

Existe-t-il un moyen de tester la couleur CSS du mot "Hello" dans un 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
});

Answer 1

Pour cela, il faut utiliser une getBy o findBy ou tout autre sélecteur et utiliser un toHaveStyle en conséquence

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

Vous devrez également installer jest-dom d'avoir toHaveStyle disponible sur

Answer 2

Vous pourriez trouver un certain succès avec le window.getComputedStyle API. En l'appelant avec un élément, vous obtenez un objet des styles de cet élément, dont vous pouvez ensuite vérifier les valeurs correctes.