reactjs - エンザイムシャローとマウントでTDD？

Question

shallowまたはを使用してコンポーネントをレンダリングするmountと、コンポーネントはメモリ内にレンダリングされ、DOM にアタッチされません。

これは、テストを実行している間、実際にはブラウザに出力が表示されないことを意味します。

開発中のコンポーネントが適切に見えるかどうかわからない場合、テスト駆動開発を行うにはどうすればよいですか? (CSS スタイル、サイズなど)

Answer 1

開発中のコンポーネントが適切に見えるかどうかわからない場合、テスト駆動開発を行うにはどうすればよいですか? (CSS スタイル、サイズなど)

Enzyme の目的は視覚的な回帰テストではありません。そのため、PhantomJS などのツールを使用する必要があります。関連記事https://css-tricks.com/visual-regression-testing-with-phantomcss/

コンポーネントがレンダリングされるときに適切なセレクターがあるかどうかを確認することで、ある種のスタイリング テストを実行できます。例えば

it( 'should add the "selected" class when a click happend to one of the Elements', () => {
    const wrapper = mount( <Elements /> );

    const option = wrapper.find( 'h5' );
    expect( option.hasClass( 'selected' ) ).to.equal( false );
    option.simulate( 'click' );
    expect( option.hasClass( 'selected' ) ).to.equal( true );
} );