create-react-app+typescript+mocha+enzyme 单元测试入门

INTRODUCTION

由于公司技术选型用的是mocha+enzyme，所以将create-react-app内置的jest单元测试框架改为mocha。

在网上查阅了很多文章，都没有相关的配置说明，所以在这里记录一下create-react-app+typescript+mocha+enzyme的配置以及踩过的坑。

GETTING STARTED

1. 安装依赖

   npm i --save-dev mocha chai enzyme
   

2.  更改package.json文件配置

   "scripts": {
       ...,
       test: "mocha",
       ....
   }
   

3.  编写单元测试文件
   在根目录下新建test文件夹，再新建test.js, 并对通用组件

   CommonTitle

   做单元测试。

   import React from 'react';
   import Enzyme from 'enzyme';
   import Adapter from 'enzyme-adapter-react-16';
   
   import CommonTitle from '../src/components/title/index.tsx';
   
   const { shallow } = Enzyme;
   Enzyme.configure({ adapter: new Adapter() });
   
   describe('Enzyme shallow', function () {
       it('common title component', function () {
           const name = 'title';
           let app = shallow(<CommonTitle title={name} />);
           let appname = app.text();
           console.log('app name', appname);
       });
   });
   

4.  运行npm test

ERROR

1. 报错提示：test.js中不能够使用import语句

   SyntaxError: Cannot use import statement outside a module
   

   原因： mocha不支持es6模块化代码，需要用babel转码成es5后再执行。
   解决：
   √ 安装依赖

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

   √ 更改package.json配置

   "scripts": {
       ...,
       test: "mocha --require @babel/register --require @babel/polyfill",
       ....
   }
   

2. 报错提示：test.js测试的CommonTitle组件文件中不能够使用import语句

   SyntaxError: Cannot use import statement outside a module

**原因：**.tsx文件需要编译**  

解决：**安装ts-node依赖，直接运行ts，不用编译  

    npm -i --save-dev ts-node

更改`package.json`配置  

    "scripts": {
        ...,
        test: "mocha --require @babel/register --require @babel/polyfill --require ts-node/register",
        ....
    }

3. 报错提示： .less文件找不到 或者 less文件里报错

    Error: Could not find source file:

解决：  

    npm i --save-dev ignore-styles

在`test.js`加入以下代码：  

    import register from 'ignore-styles';
    register(['.less', '.css']);

更改`package.json`配置  

    "scripts": {
        ...,
        test: "mocha --require @babel/register --require @babel/polyfill --require ts-node/register --require ignore-styles",
        ....
    }