Jest test React stateless functions

Altcademy Team wrote on 7 February 2018

When testing a React stateless function, Jest can't use findDOMNode to find the component.

According to React Docs https://facebook.github.io/react/docs/reusable-components.html#stateless-functions

Because stateless functions don't have a backing instance, you can't attach a ref to a stateless function component. Normally this isn't an issue, since stateless functions do not provide an imperative API. Without an imperative API, there isn't much you could do with an instance anyway. However, if a user wants to find the DOM node of a stateless function component, they must wrap the component in a stateful component (eg. ES6 class component) and attach the ref to the stateful wrapper component.

According to http://t4d.io/jest-testutils-and-react-stateless-components/

You can wrap the stateless function Component in a div tag so the DOM node can be found.

beforeEach(() => {  
  component = TestUtils.renderIntoDocument(<div><RenderDemo /></div>);
});
it('<RenderDemo /> renders', () => {  
  expect(ReactDOM.findDOMNode(component).querySelector('h1').textContent)
.toBe('Hello World!');
});