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

由于公司技术选型用的是mocha+enzyme，所以将create-react-app内置的jest单元测试框架改为mocha。 在网上查阅了很多文章，都没有相关的配置说明，所以在这里记录一下create-react-app+typescript+mocha+enzyme的配置以及踩过的坑。

环境安装

• 安装依赖

npm i --save-dev mocha chai enzyme

• 更改package.json文件配置

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

• 编写单元测试文件
  在根目录下新建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);
    });
});

• 运行 npm test

遇到的问题

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",
    ....
}