Jestを使ってDOMノードのスタイル属性を取得する方法は？

Question

私は、次のコンポーネントがあります（私は小道具値をチェックする必要はありません）私は（DOMで）実際の高さはBtnコンポーネントに渡されたものであることを確認することができるようにしたい

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

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

export default Btn; 

を。

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

をしかし、テストは失敗します：

expect(received).toEqual(expected) 

    Expected value to equal: 
     "20" 
    Received: 
     null 

任意のアイデアはどのようにこれをテストするためにこれは私が見てテストを想定だろうかありますか？

Answer 1

jest-styled-componentsライブラリを使用してください。

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