SeanPlusPlus SeanPlusPlus - 1 year ago 166
React JSX Question

How to test a React Component with Jest and Enzyme

Using the enzyme-example-jest Github project I am able to clone the repo and run the tests:

git clone
cd enzyme-example-jest
yarn install
yarn test

However, I uncommented line 11 of

expect(shallow(<Foo />).contains(<div className="foo" />)).toBe(true);

So that the file now looks like this:

import React from 'react';
import { shallow, mount, render } from 'enzyme';


const Foo = require('../Foo');

describe("A suite", function() {
it("contains spec with an expectation", function() {
expect(shallow(<Foo />).contains(<div className="foo" />)).toBe(true);

it("contains spec with an expectation", function() {
//expect(shallow(<Foo />).is('.foo')).toBe(true);

it("contains spec with an expectation", function() {
//expect(mount(<Foo />).find('.foo').length).toBe(1);

And when I run the test I now get this error:

yarn test v0.17.8
$ jest
Using Jest CLI v0.8.2, jasmine1
Running 1 test suite...Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
FAIL src/__tests__/Foo-test.js (0.931s)
● A suite › it contains spec with an expectation
- TypeError: Component is not a function
at StatelessComponent.render (node_modules/react/lib/ReactCompositeComponent.js:44:10)
1 test failed, 2 tests passed (3 total in 1 test suite, run time 1.281s)
error Command failed with exit code 1.

How do I successfully run this test?

Answer Source

'Foo' is defined with ES6 class syntax but is required with require in Foo-test.js. Using import will fix it.

Replace this

const Foo = require('../Foo');

with this

import Foo from '../Foo';

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download