采用creat-react-app脚手架和mocha和chai以及enzyme
使用mocha和chai
做法
- 1:新建react项目,使用脚手架工具
npx create-react-app my-app
cd my-app
npm start
- 2:安装mocha
- 2.1、全局安装
npm install --global mocha
- 2.2、以依赖安装
npm install --save-dev mocha
- 3:在当前目录新建test文件夹
mkdir test
- 4:然后新建test.js文件
var assert = require('assert');
describe('Array', function() {
describe('#indexOf()', function() {
it('should return -1 when the value is not present', function() {
assert.equal([1, 2, 3].indexOf(4), -1);
});
});
});
- 5:然后修改package.json文件
- 6:然后运行
npm test
终端显示测试结果
在浏览器看到结果,终端运行
./node_modules/mocha/bin/mocha
就会出现这个。
怎么在组件里面用呢(mocha+chai+enzyme)
参考大佬的,然后稍加改动
展示部分
- 1、运行项目结果如下
- 2、测试结果如下
- 3、项目结构如下
我们来看做法
- 1:用create-react-app脚手架搭建项目
npx create-react-app my-app
cd my-app
- 2:初始化package.json
npm install
- 3:安装必要依赖
npm install mocha react react-dom babel-core babel babel-preset-react babel-preset-es2015 expect.js react-addons-test-utils --save-dev
enzyme这个依赖也要装
npm i --save react@15 react-dom@15
npm i --save-dev react-test-renderer@15
npm i --save-dev enzyme enzyme-adapter-react-15
安装好的依赖如下(package.json里面)
- 4:新建.babelrc文件,内容如下
{
"presets": ["es2015", "react"]
}
- 5:然后新建test文件夹,可以在终端输入
mkdir test
- 6:写测试命令
(在package.json)中,我是测test1.js,所以在末尾写了文件名
"test": "mocha node_modules/babel-core/register --watch test/test1.js",
- 7:写组件和测试文件
然后我们看一下组件
测试文件
结束,我这个组件测试的demo放在了github上,可以直接拉下来https://github.com/pk-cat/react-mocha-enzyme
参考
大佬的https://blog.csdn.net/weixin_33877092/article/details/92438079
原链接https://my.oschina.net/000quanwei/blog/673599