赞
踩
Vue项目的单元测试用的是Vue Test Utils,这是Vue.js 官方的单元测试实用工具库,在Vue和Jest之间提供了一个桥梁,暴露出一些接口,让我们更加方便的通过Jest为Vue应用编写单元测试
官网链接:介绍 | Vue Test Utils
1、运行命令vue create ,选择自定义配置
2、按需选择配置,单元测试选择Unit Testing,端到端测试选择B2B Testing
3、接下来按需选择Vue版本以及其他配置,选择Jest,一路回车确定即可,最后需不需要保存配置由你决定
4、项目创建好后,可以看到自动创建的tests文件夹和其下的一个测试文件,以及jest.config.js配置文件
5、运行package.json中的脚本命令 npm run test:unit,即可执行tests文件夹下所有的测试文件(默认后缀为spec.js/spec.ts)以及所有的js/ts文件
1、在vue项目目录下运行 vue add @vue/cli-plugin-unit-jest 命令,这个命令会帮我们把相关的配置都配好,相关的依赖都装好,并生成jest.config.js文件和一个tests文件夹,目录结构同上面新建的Vue项目的目录结构相同
2、npm run test:unit 运行测试命令
- "scripts": {
- "test:unit": "vue-cli-service test:unit --coverage test --reporters=jest-junit",
- }
--coverage:全量覆盖率报告,会生成一个coverage文件夹,打开里面的index.html 里面会有详细的信息展示 test jest --reporters=default --reporters=jest-junit:测试报告,执行这个命令,会生成一个junit.xml文件,但要成功执行这条命令,必须执行 npm i jest-junit --save-dev,安装jest-junit依赖
更多配置可参考:https://jestjs.io/zh-Hans/docs/
- module.exports = {
- preset: "@vue/cli-plugin-unit-jest",
- verbose: true, // 多于一个测试文件运行时展示每个测试用例测试通过情况
- bail: true, // 参数指定只要有一个测试用例没有通过,就停止执行后面的测试用例
- testEnvironment: 'jsdom', // 测试环境,jsdom可以在Node虚拟浏览器环境运行测试
- moduleFileExtensions: [ // 需要检测测的文件类型
- 'js',
- 'jsx',
- 'json',
- // tell Jest to handle *.vue files
- 'vue'
- ],
- transform: { // 预处理器配置,匹配的文件要经过转译才能被识别,否则会报错
- '.+\\.(css|styl|less|sass|scss|jpg|jpeg|png|svg|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|avif)$':
- require.resolve('jest-transform-stub'),
- '^.+\\.jsx?$': require.resolve('babel-jest')
- },
- transformIgnorePatterns: ['/node_modules/'], // 转译时忽略 node_modules
- moduleNameMapper: { // 从正则表达式到模块名称的映射,和webpack的alisa类似
- '^@/(.*)$': '<rootDir>/src/$1'
- },
- snapshotSerializers: [ // Jest在快照测试中使用的快照序列化程序模块的路径列表
- 'jest-serializer-vue'
- ],
- testMatch: [ // Jest用于检测测试的文件,可以用正则去匹配
- '**/tests/unit/**/*.spec.[jt]s?(x)',
- '**/__tests__/*.[jt]s?(x)'
- ],
- collectCoverage: true, // 覆盖率报告,运行测试命令后终端会展示报告结果
- collectCoverageFrom: [ // 需要进行收集覆盖率的文件,会依次进行执行符合的文件
- 'src/**/*.{js,vue}',
- ],
- coverageReporters: ['html', 'lcov', 'text-summary'], // Jest在编写覆盖率报告的配置,添加"text"或"text-summary"在控制台输出中查看覆盖率摘要
- coveragePathIgnorePatterns: ['/node_modules/'], // 需要跳过覆盖率信息收集的文件目录
- coverageDirectory: "<rootDir>/tests/unit/coverage", // Jest输出覆盖信息文件的目录,运行测试命令会自动生成如下路径的coverage文件
- coverageThreshold: { // 覆盖结果的最低阈值设置,如果未达到阈值,jest将返回失败
- global: {
- branches: 60,
- functions: 80,
- lines: 80,
- statements: 80,
- },
- },
- testURL: 'http://localhost/', // 官网没有解释,经过尝试可以随意配置ip,如果识别不出是ip则会报错
- watchPlugins: [ // jest监视插件
- require.resolve('jest-watch-typeahead/filename'),
- require.resolve('jest-watch-typeahead/testname')
- ]
- };
具体可参考官方文档:介绍 | Vue Test Utils
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。