如何使用Jest和Enzyme测试React组件

时间:2016-11-29 06:17:35

标签: reactjs jestjs enzyme

使用enzyme-example-jest Github project我能够克隆存储库并运行测试:

git clone https://github.com/lelandrichardson/enzyme-example-jest.git
cd enzyme-example-jest
yarn install
yarn test

但是,我取消注释Foo-test.js的第11行:

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

这样文件现在看起来像这样:

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

jest.dontMock('../Foo');

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

describe("A suite", function() {
  it("contains spec with an expectation", function() {
    expect(true).toBe(true);
    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);
  });
});

当我运行测试时,我现在收到此错误:

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.

如何成功运行此测试?

1 个答案:

答案 0 :(得分:1)

'Foo'是使用ES6类语法定义的,但在require Foo-test.js中是必需的。使用import将解决此问题。

替换此

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

用这个

从'../ Foo'导入Foo;