vue-cli vue3.0 + ts搭建的项目中添加jest

如果在用vue-cli初始化项目的时候没选择安装jest。该如何配置？

1 需要的项目依赖

npm i -S @vue/cli-plugin-unit-jest vue-jest @vue/test-utils

如果是ts项目，需要额外添加 ts-jest @types/jest 安装包

2在根目录新建jest.config.js 文件，配置如下

module.exports ={

  preset:'@vue/cli-plugin-unit-jest/presets/typescript-and-babel',

}

3. 在tsconfig.json中的types选项中新增jest选项

"types": [

  "jest"

],

4.在根目录下新建tests目录，并新建其子目录unit

简单示例：

sum.ts

function sum(a:number, b:number) {

  return a + b;

}

module.exports = sum;

---

example.spec.ts

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {

  expect(sum(1, 2)).toBe(3);

});

官网传送

5在package.json中的scripts 选项中配置启动命令

"test:unit": "vue-cli-service test:unit"

运行命令后如图运行成功啦~