jestを使ったReact Snapshotテスト - 失敗した小道具タイプ：無効な小児 `string`のタイプ` string`

Question

純粋な反応成分をテストしようとしています。

import React from 'react'; 
import App from 'app/main/components/App'; 
import renderer from 'react-test-renderer'; 

jest.mock('react-dom'); 
const blank = jest.fn(); 
describe('App',() => { 
    it('Renders App',() => { 
     const component = renderer.create(<App init={blank}> </App>); 
     const tree = component.toJSON(); 
     expect(tree).toMatchSnapshot(); 
    }); 
}); 

私はエラーの下に取得するテストを実行するコンポーネント

import React, {Component} from 'react'; 

class App extends Component { 
    constructor (props){ 
     super(props); 
     props.init(); 
    } 

    render() { 
     return (
      <div className="container-wrapper"> 
       {this.props.children} 
      </div> 
     ); 
    } 
} 

App.propTypes = { 
    init : React.PropTypes.func, 
    children : React.PropTypes.element, 
}; 
export default App; 

冗談スナップショットをテストします。

console.error node_modules/fbjs/lib/warning.js:36 
     Warning: Failed prop type: Invalid prop `children` of type `string` supplied to `App`, expected a single ReactElement. 
      in App 

私は、Props.childrenが無効であることを理解できます。どのように私は小道具を模倣することができますか？あるいは他の方法テストなどのコンポーネント

Answer 1

あなたは単にあなたの<App />コンポーネントに子を渡すことができますがあります：

it('Renders App',() => { 
    const component = renderer.create(
     <App init={blank}> 
      Hello App. 
     </App> 
    ); 
    const tree = component.toJSON(); 
    expect(tree).toMatchSnapshot(); 
}); 

Answer 2

以前のソリューションは、まだ文字列を返します。代わりに任意のHTML要素を返すことができます

it('Renders App',() => { 
    const component = renderer.create(
    <App init={blank}> 
     <div /> 
    </App> 
); 
    const tree = component.toJSON(); 
    expect(tree).toMatchSnapshot(); 
});