在react中使用mocha和chai以及enzyme

采用creat-react-app脚手架和mocha和chai以及enzyme

使用mocha和chai

做法

怎么在组件里面用呢（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. 1、运行项目结果如下

1. 2、测试结果如下

1. 3、项目结构如下

我们来看做法

1. 1：用create-react-app脚手架搭建项目

npx create-react-app my-app
cd my-app

1. 2：初始化package.json

 npm install

1. 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里面)

1. 4：新建.babelrc文件，内容如下

{
  "presets": ["es2015", "react"]
}

1. 5：然后新建test文件夹,可以在终端输入

mkdir test

1. 6：写测试命令

（在package.json）中，我是测test1.js，所以在末尾写了文件名

    "test": "mocha node_modules/babel-core/register --watch test/test1.js",

1. 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