配置rollup+Jest+typescript+jsx的js库开发环境

背景

最近自己在写一个react相关的js库，需要用单元测试，因此自己配置了一个jest+typescript+jsx的js库开发环境。目前不记录rollup的配置，其他的步骤如下：

步骤一

安装相关的各类工具

yarn add jest jest-environment-jsdom ts-jest typescript tslib ts-node @babel/core @babel/preset-env babel-jest -D

1. jest-environment-jsdom是用于当jest.config.js中设置了testEnvironment: "jsdom"才需要，即需要浏览器环境下的依赖包。
2. ts-jest是用于jest中检查、编译ts语法和生成sourcemap内容，当然也可以用@babel/preset-typescript，但相比ts-jest不会检查语法和生成sourcemap。注意：需要在jest.config.ts中配置preset: 'ts-jest'。
3. babel-jest用于让jest支持babel，安装后不需任何配置，然后就可以创建.babelrc或babel.config.js编写babel配置了

步骤二

编写.babelrc

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

react的编译交给babel处理，但需注意的是，在tsconfig.json中需添加"jsx": "react"，否则将会报错

步骤三

配置jest.config.ts 使用jest --init可以很方便地生成jest.config.ts文件。以下为主要配置：

export default {
    // 是否收集测试覆盖率
    collectCoverage: true,

  // 测试覆盖率文件保存的地方
  coverageDirectory: "coverage",
  
  // 覆盖率忽略的内容
  coveragePathIgnorePatterns: [
    "\\\\node_modules\\\\"
  ],

  // 覆盖率处理程序
  coverageProvider: "v8",

  // 覆盖率报告生成的格式
  coverageReporters: [
    "json",
    "text",
    "lcov",
    "clover"
  ],
  
  // 测试的文件格式
  moduleFileExtensions: [
    "js",
    // "mjs",
    // "cjs",
    "jsx",
    "ts",
    "tsx",
    "json",
    "node"
  ],
  
  // 预设的编译器
  preset: "ts-jest",
  
  // 测试的环境，可选值为node和jsdom，值为jsdom时需要引入jest-environment-jsdom库
  testEnvironment: "jsdom",

  // 测试匹配的文件
  testMatch: [
    "**/__tests__/**/*.[jt]s?(x)",
    "**/?(*.)+(spec|test).[tj]s?(x)"
  ],
  
  // 测试忽略的路径
  testPathIgnorePatterns: [
    "\\\\node_modules\\\\"
  ],
};

步骤四

让测试支持浏览器的诸如ReadableStream等的流相关的api

1. 安装web-streams-polyfill
2. 用例文件或统一的位置引入即可import 'web-streams-polyfill';

步骤五

测试React组件，我们使用的是@testing-library/react库，可以在测试中模拟react组件的运行，就像和编写react应用一样。官网地址为：testing-library.com/docs/react-… ，具体使用查看官网

步骤六

本次测试内容包含http请求，因此我们使用了node-fetch和msw来支持fetchapi和请求拦截并返回模拟请求数据，具体如下：

1. 先安装这两个js库，然后需要在测试用例或统一的位置写入如下代码让fetch可找到

(global as any).fetch = (window as any).fetch = fetch;

2. msw正常编写模拟的响应即可，官网mswjs.io/ ，具体使用查看官网。

总结

整体配置还算顺利，但中途也卡住了几次，做一下笔记，分享到此结束。