安装使用以下命令，vue会自动创建好配置并依赖vueadd@vue/unit-jest手动配置1.安装Jest和VueTestUtilsnpminstall--save-devjest@vue/test-utils2。安装babel-jest、vue-jest和7.0.0-bridge.0版本的babel-corenpminstall--save-devbabel-jestvue-jestbabel-core@7.0.0-bridge.03。安装jest-serializer-vuenpminstall--save-devjest-serializer-vue配置JestJest配置可以在package.json中进行配置；你也可以创建一个新文件jest.config.js并将其放在项目根目录中。这里我选择在jest.config.js中配置：配置说明module.exports={//告诉jest需要解析的文件moduleFileExtensions:['js','jsx','json','vue'],//告诉jest去哪里找模块资源，和webpack中的模块一样(vue)$':'/node_modules/vue-jest','^.+\\.js$':'/node_modules/babel-jest','.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':'jest-transform-stub','^.+\\.jsx?$':'babel-jest','^。+\\.ts?$':'ts-jest'},//告诉jest哪些文件在编辑时可以忽略，默认是node_modules下的所有文件transformIgnorePatterns:['/node_modules/'+'(?!(vue-awesome|veui|resize-detector|froala-editor|echarts|html2canvas|jspdf))'],//别名，与webpack中的别名相同moduleNameMapper:{'^src(.*)$':'/src/$1','^@/(.*)$':'/src/$1','^block(.*)$':'/src/components/block/$1','^toolkit(.*)$':'/src/components/toolkit/$1'},snapshotSerializers:['jest-serializer-vue'],//告诉jest在哪里可以找到我们写的测试文件testMatch:[//'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)''**/tests/unit/**/Test.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'],//执行测试用例前需要执行的文件setupFiles:['jest-canvas-mock']};各配置项说明：需要注意的一点是，由于项目中使用了veui，node_modules中引用的源码没有经过babel转义，所以需要在transformIgnorePatterns中告诉jest需要编译。其他导入的第三方库也是如此。配置package.json编写命令脚本执行测试：{"script":{"test:unit":"vue-cli-servicetest:unit"}}注释@vue/cli-plugin-unit-mocha:使用Mocha插件进行单元/集成测试@vue/test-utils：单元/集成测试工具库chai：断言库Chai从现在开始，单元/集成测试文件可以写在tests/unit目录下，*.spec。js后缀中间。测试目录不是硬连接的，你可以使用以下命令修改它：vue-cli-servicetest:unit--recursive'src/**/*.spec.js'递归参数告诉测试运行器遵循通配符模式来搜索测试文件。shallowMount和mount两种方法都会渲染组件，但是shallowMount不会渲染子组件（子组件元素将是一个空元素）。我们可以使用查找选择器在渲染的DOM中搜索并获取其HTML、文本、类名或原生DOM元素。如果我们要搜索一个可能不存在的片段，我们可以使用exists方法来判断它是否存在。测试需要引入vueVueTestUtils
