当前位置：首页 > article >正文

在已有vue cli项目中添加单元测试配置

article 2025/3/1 10:54:37

使用的是vue cli ^4.0.0的脚手架，项目采用的vue2进行编写，项目本身是没有使用单元测试的。应该挺多项目还是使用的vue2的项目进行开发的，自己在开发中过程中，还是发生了挺多需要记录原来功能的情况，这个时候去翻文档明显是不怎么可取的，且项目中文档不一定写的很好。

安装的依赖

pnpm i -D @vue/cli-plugin-unit-jest@4 @vue/test-utils@1 jest@26 @vue/vue2-jest@26 babel-jest@26

增加执行测试的脚本

文档路径：package.json

{
    "scripts": {
        // ...
        "test:unit": "jest",
    }
}

增加jest配置

文档路径：jest.config.js

module.exports = {
    preset: '@vue/cli-plugin-unit-jest',
    collectCoverage: false,
    collectCoverageFrom: [
        'src/**/*.{js,vue}',
        '!src/main.js',
        '!src/router/index.js',
        '!src/store/**/*.js',
        '!**/node_modules/**',
    ],
};

修改babel的配置

文档路径：.eslintrc.js

module.exports = {
    // ...
    env: {
        // ...
        jest: true,
    },
}

测试的组件

文件路径：tests\unit\components\formModule.spec.js，默认的测试文件的路径匹配到**/tests/unit/**/*/之下的文件中，所以按这个路径放文件就可以测试到

import { mount } from '@vue/test-utils';
import formModule from '@/components/form/formModule.vue';

describe('测试组件formModule.vue', () => {
    it('测试表单模块标题', () => {
        const title = '基本信息';
        const wrapper = mount(formModule, {
            propsData: {
                title,
            },
        });
        expect(wrapper.text()).toMatch(title);
    });
});