Jest单元测试

使用Vue3 + Vite + Ts构建项目，搭建Jest单元测试环境

需要安装的依赖

"@babel/core": "^7.21.0",
"@babel/preset-env": "^7.20.2",
"@babel/preset-typescript": "^7.21.0",
"@types/jest": "^29.4.0",
"@vue/test-utils": "^2.0.0-rc.18",
"@vue/vue3-jest": "^29.2.2",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^29.4.3",
"jest": "^29.4.3",
"ts-jest": "^29.0.5",
"@babel/plugin-transform-modules-commonjs": "^7.20.11",
"@vitejs/plugin-vue": "^4.0.0",
"jest-environment-jsdom": "^29.4.3",
"typescript": "^4.9.3",
"vite": "^4.1.0",
"vue-tsc": "^1.0.24"

在Package.json中配置

"scripts": {
    // jest.config.js所在目录  coverage测试覆盖输出表格
    "unit": "jest  --config src/test/jest.config.js --coverage" 
}

根目录新建一个babel.config.js文件

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

在src目录下创建一个test文件夹，新建一个jest.config.js文件

// 执行命令 yarn ts-jest config:init  
/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
  preset: 'ts-jest',
  // 此处默认是'node'，如果要进行vue组件测试需要改为‘jsdom'
  testEnvironment: 'jsdom',
  transformIgnorePatterns: [
    '<rootDir>/node_modules/',
    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
    '^.+\\.module\\.(css|sass|scss|less)$',
  ],
  transform: {
    '^.+\.vue$': '@vue/vue3-jest',
    '^.+\js$': 'babel-jest',
    '^.+\\.ts$': 'ts-jest' // ts 文件用 ts-jest 转换 
  },
  moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node'],
  // Coverage相关： 测试覆盖率报告
  collectCoverage: true,
  resetMocks: true,
  globals: {
    'ts-jest': {
      useESM: true,
      tsConfig: {
        target: 'ES2019'
      },
    }
  }
}

测试ts文件, 在test文件夹下新建一个add.ts

const add = (a: number, b: number) => a + b;
export default add;

在test文件夹下新建一个test.spec.ts

import add from "./add";
describe("test", () => {
  it("first", () => {
    const result = add(1, 1);
    expect(result).toBe(2);
  });
});

成功后测试vue组件, 新建一个组件

<template>
  <div>
    <p data-testid="clicked" data-test="clicked">Times clicked: {{ count }}</p>
    <button data-testid="increment" data-test="increment" @click="increment">
      increment
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "IncrementDemo",
  setup() {
    const count = ref(0);

    return {
      count,
      increment: () => {
        count.value += 1;
      },
    };
  },
});
</script>

新建一个increment.spec.ts
```ts
import HelloWorld from "../components/HelloWorld.vue";
import { mount } from "@vue/test-utils";

test("SFC: increments value on click", async () => {
  // render component.
  const wrapper = mount(HelloWorld);

  // mounted
  const textNode = await wrapper.get('[data-test="clicked"]');
  expect(textNode).toBeTruthy();
  expect(textNode.text()).toContain("Times clicked: 0");

  // Click a couple of times.
  const button = await wrapper.get('[data-test="increment"]');
  await button.trigger("click"); // 点击一次
  // await button.trigger("click"); // 点击一次

  expect(textNode.text()).toContain("Times clicked: 1"); // 点击1次
});

运行 npm run unit，成功后将输出

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	0	0	0	0

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.438 s
Ran all test suites.