vijayst vijayst - 3 months ago 10
React JSX Question

Trouble-shooting a basic test with React and Jest

I have setup a basic test with React and Jest. It seems to be failing for some reason.

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
// import App from '../src/client/app.jsx';

const App = (props) => (
<div>Hello world</div>
);

it('App renders hello world', () => {
const app1 = TestUtils.renderIntoDocument(<App />);
const appNode = ReactDOM.findDOMNode(app1);
console.log(app1, appNode);
expect(appNode.textContent).toEqual('Hello world');
});


Both app1 and appNode are null when printed to the console. Any help?

Screenshot below:

enter image description here

Answer

TestUtils and React Stateless Components:

the suggested solution is to wrap the component inside of another component such as a DIV.

const app1 = TestUtils.renderIntoDocument(<div><App /></div>); // this should work
Comments