jest搭建vue项目单元测试-vue-cli创建新项目

说到项目会分为新建的醒目和老项目两种，我们先来说新项目。

新项目加入jest单元测试：

        1、创建项目

                使用vue脚手架创建项目 test-vue-jest

                 vue create test-vue-jest

        2、创建项目过程中配置选项

                在配置项中按照正常创建项目选择配置项即可，此外需要选择单元测试“Unit Testing” 和 “Jest”选项如下图：

                

 

        3、目录结构

                项目中tests\unit目录存放测试文件

                

        4、运行单元测试

                在package.json中会生成如下：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit"
  },

               其中"test:unit": "vue-cli-service test:unit" 会帮我们运行单元测试，其过程中会自动取单元测试文件目录下执行所有的测试文件。

                我们命令行工具在当前项目根目录下运行：npm run test:unit

                测试结果如下图：

        5、生成测试覆盖率信息及文件

                首先找到jset配置文件，位置在项目根目录中的jest.config.js

                 jest.config.js文件中增加"collectCoverage" 和  "collectCoverageFrom"两个配置项：

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
    // 开启生成覆盖率功能
    "collectCoverage": true,
    // 配置需要检查覆盖率的文件
    "collectCoverageFrom": [
      "src/**/*.{js,vue}"
    ]
}

                运行npm run test:unit

                 再看我们的项目目录多出了coverage\lcov-report目录其中的index.html是生成的测试覆盖率结果文件

                目录结构：

                我们运行测试结果文件index.htm

 

 

 

         新项vue项目我们使用vue-cli可以直接配置安装jest，通过 简单的配置我们就可以使用了。

jest搭建vue项目单元测试-现有老项目