阅读 237

Jest使用ES6语法配置

问题描述

在jest原生测试框架中,无法使用es6的import export语法,只能使用commonJS语法,本文解决了相关配置问题。

解决方法

step1

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

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

step2

安装ES6语法解析转换插件

npm install --save-dev @babel/plugin-transform-modules-commonjs
复制代码

package中简单配置如下:

  "scripts": {
    "test": "jest"
  },
  "jest": {
    "collectCoverage": true
  },
复制代码

即可成功运行。

image-20210729103849220.png

适配ES6和React官方配置

学习jest snapshot的时候看到了官网给出的配置,试了一下也能正常运行,这里记录一下:

//.babelrc.js
module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
  plugins: ['@babel/plugin-proposal-class-properties'],
};
复制代码
//package.json
​
{
  "private": true,
  "version": "0.0.0",
  "name": "example-snapshot",
  "dependencies": {
    "react": "*"
  },
  "devDependencies": {
    "@babel/core": "*",
    "@babel/plugin-proposal-class-properties": "*",
    "@babel/preset-env": "*",
    "@babel/preset-react": "*",
    "babel-jest": "*",
    "jest": "*",
    "react-test-renderer": "*"
  },
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "testEnvironment": "node"
  }
}
复制代码

以上

参考文档

文章分类
前端