動態

詳情 返回 返回

jest +ts +esm - 動態 詳情

Jest 是當下最主流的前端測試框架
首先初始化ts環境
image.png

yarn add typescript --dev
npx tsc --init

第二步:安裝ts下的jest
yarn add jest @types/jest --dev

第三步:新建tests文件夾
tests/index.spec.ts

it('init',()=>{
    expect(true).toBe(true)
})

此處記住要在tsconfig.json裏面修改配置
"types": ["jest"],

第四步
package.json添加

 "scripts": {
    "test":"jest"
  },

執行npm run test
得到
image.png

接下來處理導入模塊的問題
index.ts

export function add (a,b){
    return a+b
}

index.spec.ts

import { add } from "../index"
it('init',()=>{
    expect(add(2,3)).toBe(5)
})

執行npm run test報錯
image.png

打開https://www.jestjs.cn/docs/getting-started
配置 Babel

npm install --save-dev babel-jest @babel/core @babel/preset-env

在項目的根目錄下創建 babel.config.js ,通過配置 Babel 使其能夠兼容當前的 Node 版本。

babel.config.js
module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

使用 Typescript
通過 babel 來支持 Typescript
通過 Babel,Jest 能夠支持 Typescript。首先要確保你遵循了上述 使用 Babel 指引。接下來安裝 @babel/preset-typescript 插件:

npm install --save-dev @babel/preset-typescript
babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

最後執行npm run test
image.png

初步完成在ts環境下的jest單測

user avatar grewer 頭像 littlelyon 頭像 zourongle 頭像 hard_heart_603dd717240e2 頭像 Z-HarOld 頭像 nqbefgvs 頭像 yixiyidong 頭像 munergs 頭像 weidewei 頭像 kongsq 頭像 yulong1992 頭像 yuhuashi_584a46acea21f 頭像
點贊 82 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.