react组件单元测试（enzyme+mocha+chai)

最新推荐文章于 2024-09-01 07:18:25 发布

菜鸟小佳

最新推荐文章于 2024-09-01 07:18:25 发布

阅读量745

点赞数

文章标签： mocha enzyme react

本文链接：https://blog.csdn.net/weixin_42429288/article/details/98179355

版权

学习背景

学习mocha+chai的时候，想在react中测试一个组件，接触到了开源React 测试工具库 Enzyme。

它的Api着重于渲染react组件和从dom树中检索指定的节点，但是它的使用需要使用到babel，

然后我在上一篇文章react使用mocha中写了一个demo，但是babel的版本比较旧，所以用新版本去尝试了一下，在此记录，方便以后回顾。

如何在react中使用？

环境搭建

react脚手架

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

安装mocha

全局安装:

$ npm install --global mocha

以依赖安装

$ npm install --save-dev mocha

我用的是依赖安装

安装chai

npm install chai

我用的是依赖安装

npm install chai --save-dev

修改package.json

官网说这样便于集成开发，无论何时运行npm install 都能使用最新版本

安装enzyme

官网是跟react16版本一起用，所以这么下载

npm i --save react@16 react-dom@16

npm i --save-dev enzyme enzyme-adapter-react-16

这个时候先不忙写测试文件，因为这里存在语法问题，直接去用会报语法不识别错误，所以我的做法是引入babel并配置

引入babel

npm install @babel @babel/core @babel/preset-env 
@babel/preset-react @babel/register --save-dev

@babel/core是babel的核心，@babel/preset-env是预设转换语法用的，因为babel-preset-es2015已经废弃，所以用它，

@babel/preset-react允许使用使用JSX语法，最重要的是这个@babel/register，这个注册器，能够在组件中使用babel。

接下来配置babel

参考官网

我使用.babelrc方式，即在当前项目下建立.babelrc文件

{
  "presets": ["@babel/preset-react","@babel/preset-env"]
}

到此依赖安装结束，package.json的依赖如下

改scripts中的test

因为我打算测clock.test.js文件，所以末尾的文件目录写的是clock.test.js，文件目录可以根据你的需求来写

    "test": "mocha --require node_modules/@babel/register test/clock.test.js",

改完后如下：

然后就可以开始写Test啦

写TEST

打开终端，在命令行输入

mkdir test

然后就会在目录中生成一个test文件夹

然后你就可以在这个文件夹下新建测试文件啦

不过在此之前，我们来看一下打算测的那个组件

import React from 'react';
class Clock extends React.Component {
  render() {
    return (
      <div>
        <p className="test">this is a test</p>
      </div>
    );
  }
}
export default Clock;

我们再来看看测试文件

// enzyme
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });
import { shallow } from "enzyme";
// component
import Clock from "../src/clock";
// expect
import chai from "chai";
var expect = chai.expect;
// react
import React from "react";

describe("enzyme+mocha", function() {
  const wrapper = shallow(<Clock />);
  it("test of find", function() {
    expect(wrapper.find(".test")).to.have.lengthOf(1);
  });
  it("test of text", function() {
    expect(wrapper.find(".test").text()).to.equal("this is a test");
  });
});

具体测试的内容可以按照enzyme、chai的API去编写