Shallow Rendering Jestスナップショット

Question

JestとSnapshotのテストを始めたばかりなので、すべての例でReactコンポーネントの「ディープレンダリング」がスナップショットを作成する理由がわかりました。

例

const A =() => { 
    return <div><B /><B /></div> 
} 
const B =() => { 
    return <div>This is B</div> 
} 

// TEST 
describe('Test',() => { 

    it('renders correctly',() => { 
     const tree = ReactTestRenderer.create(
     <A /> 
    ).toJSON(); 

     expect(tree).toMatchSnapshot(); 
    }); 
}); 

スナップショット：

exports[`Summary DOM rendering renders correctly 1`] = ` 
<div> 
    <div> 
    This is B 
    </div> 
    <div> 
    This is B 
    </div> 
</div> 
`; 

これは便利ですが、時々私はそれがAとBのための独立したテスト/スナップショットを持っているし、ので、もし浅いレンダリングを行うにははるかに理にかなっていると思います私はBを変更する私のスナップショットは更新する必要はありません。だから私はスナップショットをこのように見せたい：

exports[`Summary DOM rendering renders correctly 1`] = ` 
<div> 
    <B /> 
    <B /> 
</div> 
`; 

これを実行する方法はありますか？これは最初の良いアイデアですか？可能であれば、浅いレンダリングがドキュメントで好まれない理由は何ですか？

Answer 1

アップデート（2018年1月3日）あなたにもスナップショットテストでreact-test-utils Shallow Renderingを使用することができます。それに

import ReactTestUtils from 'react-addons-test-utils'; 

describe('Test',() => { 

    it('renders correctly',() => { 
     const renderer = ReactTestUtils.createRenderer(); 
     expect(renderer.render(<A />)).toMatchSnapshot(); 
    }); 
}); 

あなたは1レベル深さだけレンダリングするレンダラーを作成することができますここでは、コンポーネントのrender()の機能だけをレンダリングし、子コンポーネントはレンダリングしません。

react-test-rendererは、別のレンダラーであり、コンポーネント（およびツリー全体）をJSONにレンダリングします。現在のところ、浅くレンダリングするオプションはありません。ブラウザと同様に動作し、すべてをレンダリングしますが、JSONには動作します。

DOM環境を必要とせず、特性も異なるため、どちらもテストに適しています。あなたのユースケースに合ったものを選ぶことができます。

Answer 2

enzymeを使用すると、コンポーネントをシャローレンダリングできます。

なぜそれがドキュメントの中で推奨されている方法ではないのかはわかりませんが、その機能は公式react-test-rendererに組み込まれていないためです。

Shallowrenderがreact-test-renderer

import ShallowRenderer from 'react-test-renderer/shallow' 

it('Matches snapshot',() => { 
    const renderer = new ShallowRenderer() 
    const result = renderer.render(<A />) 
    expect(result).toMatchSnapshot() 
}) 

---

に移動された