vijayst vijayst - 1 year ago 82
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 Source

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
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download