环境搭建
准备react项目
通过create-react-app搭建一个基本react项目供测试使用。
搭建测试环境
安装依赖：
npm install jest --save-dev
npm install enzyme --save-dev
npm install enzyme-to-json --save-dev
npm install enzyme-adapter-react-16
配置packang.json:
"scripts": {
"test": "jest"
}
Jest配置文件
生成jest配置文件：
npx jest --init
在新生成的jest配置文件jest.config.js中进行配置：
rootDir: './',
setupFiles: [
"<rootDir>/test/setup.js"
],
moduleFileExtensions: [
"js",
"jsx",
"ts",
"tsx",
"json",
"node"
]
在测试中可定会使用使用es6的import和export，所以需要通过babel来进行将es6模块转换成commonJs模块。
npm install @babel/core @babel/preset-env
setup.js文件
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
.babelrc文件
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
编写测试
待测试的组件：
// App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h1>hello World</h1>
</div>
)
}
}
export default App;
测试代码：
//app.test.js
import React from 'react';
import App from '../src/App';
import { shallow } from 'enzyme'
describe('component APP test', () => {
it('测试hello world', () => {
const app = shallow(<App />);
expect(app.find('h1').text()).toBe('hello World')
})
})
执行npm test产看运行结果如下：
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
