如何使用 Jest 和 Enzyme 测试 React 组件
How to test a React Component with Jest and Enzyme
使用 enzyme-example-jest Github project 我能够克隆 repo 和 运行 测试:
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.
如何才能成功运行这个测试?
'Foo' 是用 ES6 class 语法定义的,但在 Foo-test.js
中 require
是必需的。使用 import
将修复它。
替换这个
const Foo = require('../Foo');
有了这个
从“../Foo”导入 Foo;
使用 enzyme-example-jest Github project 我能够克隆 repo 和 运行 测试:
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.
如何才能成功运行这个测试?
'Foo' 是用 ES6 class 语法定义的,但在 Foo-test.js
中 require
是必需的。使用 import
将修复它。
替换这个
const Foo = require('../Foo');
有了这个
从“../Foo”导入 Foo;