React Snapshot testing со шуткой - Failed prop type: Invalid prop `children` типа` string` поставлен

Question

Я пытаюсь протестировать чистый реагирующий компонент.

Компонент

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; 

Jest Snapshot Тест

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(); 
    }); 
}); 

Когда я выполнить тест, я получаю ниже ошибки.

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(); 
});