Reactガイドを読んでいくその215
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
Test Renderer
インポート
import TestRenderer from 'react-test-renderer'; // ES6 const TestRenderer = require('react-test-renderer'); // ES5 with npm
概要
このパッケージではDOMやネイティブのモバイル環境に依存せずReactをピュアJavaScriptオブジェクトにレンダーすることができる。
ブラウザやjsdomを利用しなくてもReactDOMやReactNativeコンポーネントビューの階層構造のスナップショットを容易に主録できるようにするためのもの。
JSONツリーを自動的にファイルに保存し、変更が起こったかどうかをテストで確認するにはJestのスナップショットテスト機能が利用可能。
import TestRenderer from 'react-test-renderer'; function MyComponent() { return ( <div> <SubComponent foo="bar" /> <p className="my">Hello</p> </div> ) } function SubComponent() { return ( <p className="sub">Sub</p> ); } const testRenderer = TestRenderer.create(<MyComponent />); const testInstance = testRenderer.root; expect(testInstance.findByType(SubComponent).props.foo).toBe('bar'); expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);
今日はここまで。