jest使用常见问题总结

jest是前端最常用的做单元测试的框架，但在初次使用配置的时候，常常遇到一些问题，网上的解决方案也是五花八门，在此基于个人使用经验，做一个总结。

配置jest

• 添加jest npm包

代码块

yarn add --dev jest

• 配置package.json

{
  "scripts": {

    "jest": "jest"

  }
}

• jest配置文件

  • 执行以下代码，选择给出的配置项，自动生成jest.config.js配置文件

yarn jest --init

常见问题

• jest报错SyntaxError: Cannot use import statement outside a module

解决方法：

目前jest是运行在node环境下，所以不支持ES6。需要通过配置babel来将ECMAScript转换成CommonJS

1. 按照npm包

npm install --save-dev @babel/plugin-transform-modules-commonjs

1. 在根目录下添加.babelrc文件

{
  "env": {
    "test": {
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}

• 如何在jest中使用路径别名

在jest中引入src中要测试的内容，使用相对路径，在不同的路径下要多写很多相对路径相关的代码，非常麻烦。如

import {functionA} from '../../../src/utils/util'

解决方法：

在jest.config.js中配置moduleNameMapper字段

moduleNameMapper: {
  "@/(.*)$": "<rootDir>/src/$1"
}

• js报错ReferenceError: wx is not defined

解决方法：

在jest.config.js中配置globals字段

jest.config.js

TypeScript

globals: {
  wx: {}
}

• jest代码上有Eslint报错

解决方法：

1. 添加eslint-plugin-jest

yarn add --dev eslint eslint-plugin-jest

1. 配置.eslintrc文件

{
    "extends": [
        "plugin:jest/recommended"
    ]
}