Reactガイドを読んでいくその215

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

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

今日はここまで。