レンダーされたReactコンポーネントがJestユニットテストでどのように見えるかを確認するには？

Question

私はReactコンポーネントのテストを実行しようとしています。レンダリング後の外観を確認する必要があります。 ReactDOMServer.renderToString()を使用しようとしましたが、失敗します。ここでは、コードは次のようになります。

import { NewRec } from '../src/components/edit'; 
import { shallow } from 'enzyme'; 
import React from 'react/lib/ReactWithAddons'; 
import ReactDOMServer from 'react-dom/server'; 

jest.mock('react-dom'); 
jest.mock('react/lib/ReactDefaultInjection'); 

describe('NewRec component',() => { 
    const component = shallow(<NewRec />); 
    it('returns true if blah blah',()=>{ 
     var htmlstring = ReactDOMServer.renderToString(<component />); 
    }); 
}); 

私は次のエラーを取得しています：

Invariant Violation: There is no registered component for the tag component 

私が好きそれを呼び出そうとしました：var htmlstring = ReactDOMServer.renderToString(component);は、私はこのエラーを取得する：

Invariant Violation: renderToString(): You must pass a valid ReactElement. 

は誰もい問題がどこにあるか知っていますか？

Answer 1

Jestにはsnapshot featureがあり、レンダリングされたツリーをファイルとして保存します。酵素レンダリングコンポーネントをスナップショットメソッドが理解できるものに変換するには、enzyme-to-jsonもインストールする必要があります。

import { NewRec } from '../src/components/edit'; 
import { shallow } from 'enzyme'; 
import { shallowToJson } from 'enzyme-to-json'; 

describe('NewRec component',() = > { 
    it('returns true if blah blah',() = > { 
    const component = shallow(<NewRec />); 
    expect(shallowToJson(component)).toMatchSnapshot(); 
    }); 
}); 

これは、あなたがレンダリングされた結果を検査することができ、あなたのテストフォルダ内の__snapshot__フォルダに新しいファイルを作成します。テストを再実行するたびに、コンポーネントはスナップショットに対してテストされます。

Answer 2

あなたは、酵素を使用しない場合、あなたはあまりにもFacebookのreact-test-rendererを使用することができ、それも簡単です：

import React from "react"; 
import renderer from "react-test-renderer"; 

test("Test 1",() => { 
    const component = renderer.create(
    <TestItem /> 
); 

    let tree = component.toJSON(); 
    expect(tree).toMatchSnapshot(); 
});