React组件库搭建流程（二） -- 单元测试和代码规范上一篇文章已经大致能搭建出一个基础的组件库平台，有预览也有文档

上一篇文章已经大致能搭建出一个基础的组件库平台，有预览也有文档大致满足一个组件库平台的要求，只要继续添加提取的组件就可。这一篇文章主要写下如何进行组件单元测试、本地代码规范该如何配置。

单元测试

其实很长一点时间以来，单元测试在前端不算流行，但是在日渐复杂的前端工程化发展下，项目日渐复杂化及代码高复用性等，个人觉得单元测试愈发重要。在这里给大家做个入门简介，给大家抛砖迎玉，毕竟我本人也只是前端单元测试的小学生，哈哈。

测试框架

列举下主流前三的前端单元测试框架分别是： Karma 、Mocha 、jest -Jest 。

这里咱们选择jest -Jest作为我们的测试框架，感兴趣的同学可自行学习。

单元测试组件库必备的，在React中常见的测试库有2个，一个是Enzyme，一个是react-testing-library。这里我们选择react-testing-library 对 reactv17兼容性更好一些。

接下来我们开始配置，首先安装依赖：

 yarn add jest ts-jest @testing-library/react @testing-library/react-dom  @types/jest @types/testing-library__react --dev

jest.config.js

然后配置jest.config.js, 执行 npx jest --init,自动生成文件，找出下面的属性编辑，如下：

module.exports = {
  verbose: true,
  roots: ['<rootDir>/src'],
  testRegex: '(/test/.*|\\.(test|spec))\\.(ts|tsx|js)$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  testPathIgnorePatterns: ['/node_modules/', '/lib/', '/esm/', '/dist/'],
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
};

package.js

修改package.json，增加测试相关命令，如下：

"test": "jest", #执行jest
"test:watch": "jest --watch", #watch下执行 jest           
"test:coverage": "jest --coverage",  # 生成覆盖率报告    
"test:update": "jest --updateSnapshot"  # 生成快照

测试用例

我这边写的组件只是做个示例用，简单来个快照测试。

在对应组件的文件夹下新建test文件夹，用于存放测试文件，其内新建index.test.tsx文件，写入以下测试用例：

import React from 'react';
import { render } from '@testing-library/react';
import Button from '../index';

describe('<Button />', () => {
  test('should render default', () => {
    const { container } = render(<Button>default</Button>);
    expect(container).toMatchSnapshot();
  });
});

这边写的很简单，只给大家做个例子，运行 yarn test:update,

测试执行成功。同时可见同级目录下新增了一个__snapshots__文件夹，里面存放对应测试用例的快照文件。

到此我们已经完成基本的单元测试配置，可以开始写组件单元测试。

代码规范

本地代码规范大家都很熟悉了，这里使用@umijs/fabric,如下

yarn add @umijs/fabric prettier --dev

.eslintrc.js

module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/eslint')],
};

.stylelintrc.js

module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/stylelint')],
};

.prettierrc.js

const fabric = require('@umijs/fabric');

module.exports = {
  ...fabric.prettier,
};

到此咱们本地的代码规范也已经配置完成了，由此我们初步的保证了咱们组件的质量问题，不会待着问题发布到git上。
下一期我们再来探讨一下git提交流程规范以及打包编译发布到npm上该如何操作。

React组件库搭建流程 （二） -- 单元测试和代码规范