记录工作中的配置！！！Vue3 TS jest单元测试环境配置

安装依赖

npm install @types/jest @vue/cli-plugin-unit-jest @vue/test-utils @vue/vue3-jest babel-jest jest ts-jest -D

package.json 如下

 "scripts": {
    "test:unit": "vue-cli-service test:unit --coverage",
  },
  "dependencies": {
    "@types/jest": "^27.5.2",
    "@vue/cli-plugin-unit-jest": "^5.0.8",
    "@vue/test-utils": "^2.4.1",
    "@vue/vue3-jest": "^27.0.0",
    "babel-jest": "^27.5.1",
    "jest": "^27.5.1",
    "ts-jest": "^27.1.5"
  },
  // 新增jest的配置
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
    "transformIgnorePatterns": [
      "!node_modules/"
    ]
  }

tsconfig.json新增jest的type

"types": [ "jest"],

如果使用了eslint，需在.eslintrc.js配置文件中新增

 overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]

在项目根目录新建test/unit/example.spec.ts

import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";

describe("HelloWorld.vue", () => {
it("renders props.msg when passed", () => {
  const msg = "new message";
  const wrapper = shallowMount(HelloWorld, {
    props: { msg },
  });
  expect(wrapper.text()).toMatch(msg);Ï
});
});

最后执行命令 npm run test:unit

npm run test:unit