Comment obtenir l'attribut de style du noeud DOM en utilisant Jest?

Question

je le composant suivant:

// Styled component. 
export const StyledBtn = styled.button` 
    height: ${(height) => height}; 
`; 

// Functional component. 
const Btn = ({ height }) => <StyledBtn height={height} />; 

export default Btn; 

Je veux être en mesure de vérifier que la hauteur réelle (dans le DOM) est ce qui a été transmis à la composante Btn (je ne veux pas vérifier la valeur de prop) . Voici comment j'envisager le test recherche:

test('button renders at the correct height',() => { 
    const btn = mount(<Btn height={20}); 
    const node = findDOMNode(btn); 
    const height = node.getAttribute('height'); 
    expect(height).toEqual('20'); 
}); 

Mais, le test échoue:

expect(received).toEqual(expected) 

    Expected value to equal: 
     "20" 
    Received: 
     null 

Toute idée comment tester cela?

Answer 1

Utilisez la bibliothèque jest-styled-components. En outre, la fonction mount() est le montage du composant fonctionnel, vous devez alors find le composant de style en son sein:

import 'jest-styled-components'; 
... 
test('button renders at the correct height',() => { 
    const component = mount(<Btn height={20}); 
    const btn = component.find('button'); 
    expect(btn).toHaveStyleRule('height', '20px'); 
});