Vue2 使用Jest进行单元测试

1. 安装插件

首先，进入Vue2项目下，安装相关插件，根据自己需要，选择插件版本

npm install --save-dev jest @vue/test-utils@^1.1.0 vue-jest babel-jest jest-environment-jsdom babel-core@^7.0.0-bridge.0 @babel/core

2. 最简单测试练习

2.1 创建test.js文件

在根目录创建test.js文件，并写简单的测试内容，如：

function sum(a, b) {
  return a + b;
}

test('测试1+2是否返回结果3', () => {
  expect(sum(1, 2)).toBe(3);
});

2.2 （可选）测试方法报错

如果项目有eslint，可能会报错，没有报错则忽略

 报错则在.eslintrc.cjs文件添加jest即可

代码示例

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  env: {
    jest: true,
    browser: true,
    es6: true,
    es7: true,
    node: true
  }
}

2.3 配置脚本

在package.json文件中配置jest脚本

2.4 执行测试，观察结果

成功！

3. 进阶：引入.vue文件中的内容进行测试

3.1 配置jest.config.js文件

在jest.config.js进行如下简单配置（没有该文件就自行创建）

// jest.config.js
module.exports = {
    //用于为.vue等进行转换，使jest可以正常读取到
    transform: {
        '^.+\\.vue$': 'vue-jest',
        '^.+\\.jsx?$': 'babel-jest',
    },
    // 指定测试文件的匹配模式
    testMatch: [
        '**/__tests__/**/*.spec.[jt]s?(x)',
        '**/?(*.)+(spec|test).[jt]s?(x)',
    ],
    // 在 jsdom 环境中运行测试，是一个在 Node.js 中模拟浏览器环境的工具
    testEnvironment: 'jsdom',
};

3.2 配置babel.config.js文件

在babel.config.js进行如下简单配置（没有该文件就自行创建）

module.exports = {
  //用于处理es5以上语法，可支持import导入等
  presets: [
    '@vue/cli-plugin-babel/preset',
    ['@babel/preset-env', { targets: { node: 'current' } }]
  ]
}

3.3 vue2组件示例

假设在图中目录下有HelloWorld.vue组件，并包含以下代码

<template>
  <div>
    <h1>{{ greeting }}</h1>
    <button @click="changeGreeting">Change Greeting</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello, World!',
    };
  },
  methods: {
    changeGreeting() {
      this.greeting = '你好世界！';
    },
  },
};
</script>

 3.4 创建测试文件夹（tests），和相关测试文件

一般情况下，执行测试的文件名中必须包含 ".test." 或 ".spec." 。所以我们创建一个tests文件夹，用来专门存储测试文件，并在tests路径下创建两个简单的测试文件，这里我两个都测试一下，所以创建了first.test.js和HelloWorld.spec.js文件

//first.test.js
function sum(a, b) {
  return a + b;
}

test('测试1+2是否返回结果=3', () => {
  expect(sum(1, 2)).toBe(3);
});

//HelloWorld.spec.js
import { mount } from '@vue/test-utils';
import HelloWorld from '../src/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
    it('renders the initial greeting', () => {
        const wrapper = mount(HelloWorld);
        expect(wrapper.text()).toContain('Hello, World!');
    });

    it('changes the greeting when the button is clicked', async () => {
        const wrapper = mount(HelloWorld);
        await wrapper.find('button').trigger('click');
        expect(wrapper.text()).toContain('你好世界！');
    });
});

 4.4 执行测试，观察结果

成功！

更多进阶待续。。。觉得好的话记得点赞哦！