安装

方式一

官方旧文档的安装方式

vue add @vue/unit-jest

有几个坑点

如果项目中使用pnpm，执行会失败

目前不清楚原因，可以借鉴blog.csdn.net/weixin_4224… 但是尝试方法都没有生效，后面改成了npm

报错babelJest.getCacheKey is not a function

修改babel-jest 的版本 "babel-jest": "^26.3.0"

如果项目中引入了unplugin-auto-import/vite 包,jest 提示没有引入对应依赖

jest-config.js 里面增加配置

setupFiles: ['<rootDir>/src/jest-setup.js'], //启动jest需要的文件

然后在jest-setup.js里面增加

import * as vue from 'vue';
for (const key of Object.keys(vue)) {
  global[key] = vue[key];
}

方式二

安装依赖

pnpm add jest@26.6.3 @types/jest@26.0.14  babel-jest@26.3.0  vue-jest@next @vue/test-utils@next -D -S
pnpm add ts-jest@26.5.6 @babel/preset-env@7.18.6 @babel/preset-typescript@7.18.6 @types/jest -D -S

配置babel

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

jest.config.js

module.exports = {
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\js$': 'babel-jest',
    '^.+\\.(t|j)sx?$': 'ts-jest',
  },
  setupFiles: ['<rootDir>/src/jest-setup.js'], //启动jest需要的文件

  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  resolver: null,
  transformIgnorePatterns: ['/!node_modules\\/lodash-es/'],

  moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node'],
};

package.json 增加命令

    "test": "jest ./tests",

jest 会自动去执行以.spec.js或者.test.js结尾的测试文件

配置说明

关于jest.config.js


module.exports = {
    "moduleFileExtensions": [ 
        "js",
        "json",
        "vue" // 告诉 Jest 处理 `*.vue` 文件
    ],
    testMatch: [ //test文件所在位置
        '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
    ],
    "transform": { 
        ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest", // 用 `vue-jest` 处理 `*.vue` 文件
        "^.+\\.js$": "babel-jest" // 用 `babel-jest` 处理 js
    },
    "moduleNameMapper": { 
        "^@/(.*)$": "<rootDir>/src/$1" //配置别名
    },
    "collectCoverage": true,  //是否创建报告
    "collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"], //创建报告的文件来源
    "coverageReporters": ["html", "text-summary"]   //报告的格式                
    "coveragePathIgnorePatterns":"[]"  //生成报告需要忽略的文件，默认值为 node_modules    
    setupFiles: ['<rootDir>/src/jest-setup.js'] //启动jest需要的文件
   }

jest默认覆盖文件

.spec.js
.test.js
test 目录下的文件

jest 覆盖率
在命令后增加 --coverage 即可测试覆盖率
jest 测试watch
在命令后增加 --watchAll

语法

vue-test-utils

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

shallowMount 和 mount
- shallowMount 只渲染当前组件
- mount 渲染组件以及子组件
推荐使用shallowMount 更符合单元测试思想，如果要测试子组件内容，可以另起一个单元测试
Wrapper - 包括了一个挂载组件或 vnode，以及测试该组件或 vnode 的方法。
- .vm -组件vue实例
- .classes('test') -返回是否拥有该class的dom或者类名数组
- .find() -返回第一个满足条件的dom
- .findAll() -返回所有满足条件的dom
- .html() -返回html字符串
- .text() -返回内容字符串
- .setData(data) -设置组件data
- .setProps(data) -设置props数据
- .trigger('click') -触发事件
- .emitted() -测试事件emit

jest断言

toBeNull：判断是否为null
toBeUndefined：判断是否为undefined
toBeDefined：与上相反
toBeNaN：判断是否为NaN
toBeTruthy：判断是否为true
toBeFalsy：判断是否为false
toContain：数组用，检测是否包含
toHaveLength：数组用，检测数组长度
toHaveProperty：对象用，检测对象是否包含这个key
toEqual：对象用，检测是否相等
toThrow：异常匹配

其他

jest对第三方库的mock 上一文说过，可以具体看下上一文章中的说明
it.only 只跑当前这一个测试
it.skip 跳过这个用例（临时忽略这个用例）

以上是vue-test-utils的环境搭建和基础语法以及断言说明的补充，下面一篇将结合组件编写具体测试语法

【测试一下！】vue3的单元测试（二）-vue-test-util基础篇

安装

方式一

方式二

配置说明

语法

vue-test-utils

jest断言

其他