个人网站可备案,网站域名如何查询,开发一款app大概多少钱,国外英文网站使用的是vue cli ^4.0.0的脚手架#xff0c;项目采用的vue2进行编写#xff0c;项目本身是没有使用单元测试的。应该挺多项目还是使用的vue2的项目进行开发的#xff0c;自己在开发中过程中#xff0c;还是发生了挺多需要记录原来功能的情况#xff0c;这个时候去翻文档明…使用的是vue cli ^4.0.0的脚手架项目采用的vue2进行编写项目本身是没有使用单元测试的。应该挺多项目还是使用的vue2的项目进行开发的自己在开发中过程中还是发生了挺多需要记录原来功能的情况这个时候去翻文档明显是不怎么可取的且项目中文档不一定写的很好。
安装的依赖
pnpm i -D vue/cli-plugin-unit-jest4 vue/test-utils1 jest26 vue/vue2-jest26 babel-jest26增加执行测试的脚本
文档路径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);});
});
执行测试
npx pnpm test:unit如果使用collectCoverage true的配置的话 可以生成代码的覆盖率
其他安装依赖的问题 问题1TypeError: (0 , _vueJest.describe) is not a function 解决在eslint中的env中添加jest为true 问题2TypeError: Cannot destructure property ‘ensureValidVNode’ of ‘Vue.ssrUtils’ as it is undefined 解决安装npx pnpm i -D vue/test-utils1
