vue 单元测试

vue 单元测试

vue unit_test

jest

参考官网说明 https://vue-test-utils.vuejs.org/zh/installation/

1.浏览器环境

npm install --save-dev jsdom jsdom-global

---

// 在测试的设置 / 入口中 （这一句是错的，不用管他）
require('jsdom-global')()

2.我们要做的第一件事就是安装 Jest 和 Vue Test Utils：

 npm install --save-dev jest @vue/test-utils

3.然后我们需要在 package.json 中定义一个单元测试的脚本。

// package.json
{
  "scripts": {
    "test": "jest"
  }
}

4.为了告诉 Jest 如何处理 *.vue 文件，我们需要安装和配置 vue-jest 预处理器：

npm install --save-dev vue-jest

接下来在 package.json 中创建一个 jest 块：

{
  // ...
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      // 告诉 Jest 处理 `*.vue` 文件
      "vue"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "transform": {
      // 用 `vue-jest` 处理 `*.vue` 文件
      ".*\\.(vue)$": "vue-jest"
    }
  }
}

5.为 Jest 配置 Babel

尽管最新版本的 Node 已经支持绝大多数的 ES2015 特性，你可能仍然想要在你的测试中使用 ES modules 语法和 stage-x 的特性。为此我们需要安装 babel-jest：

npm install --save-dev babel-jest

接下来，我们需要在 package.json 的 jest.transform 里添加一个入口，来告诉 Jest 用 babel-jest 处理 JavaScript 测试文件：

{
  // ...
  "jest": {
    // ...
    "transform": {
      // ...
      // 用 `babel-jest` 处理 js
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    }
    // ...
  }
}

.babelrc 文件示例：

{
    "env": {
    "test": {
      "presets": [["env", { "targets": { "node": "current" } }]]
    }
  }
}

6.放置测试文件

默认情况下，Jest 将会递归的找到整个工程里所有 .spec.js 或 .test.js 扩展名的文件。如果这不符合你的需求，你也可以在 package.json 里的配置段落中改变它的 testRegex

6.测试覆盖率

Jest 可以被用来生成多种格式的测试覆盖率报告。以下是一个简单的起步的例子：

扩展你的 jest 配置 (通常在 package.json 或 jest.config.js 中) 的 collectCoverage 选项，然后添加 collectCoverageFrom 数组来定义需要收集测试覆盖率信息的文件。

{
  "jest": {
    // ...
    "collectCoverage": true,
    "collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"]
  }
}

这样就会开启默认格式的测试覆盖率报告。你可以通过 coverageReporters 选项来定制它们。

{
  "jest": {
    // ...
    "coverageReporters": ["html", "text-summary"]
  }
}

更多文档内容请移步至 Jest 配置文档，在那里你可以找到覆盖率阀值、目标输出目录等选项。

7.测试规范示例

如果你已经熟悉了 Jasmine，你应该很适应 Jest 的断言 API：

import { mount } from '@vue/test-utils'
import Component from './component'

describe('Component', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(Component)
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
})

8.运行测试

npm run test

8.1.报错收集

window is undefined, vue-test-utils needs to be run in a browser environment.
    You can run the tests in node using jsdom

应对办法：在package.json中加入

"jest":{
	"testEnvironment": "jsdom"
}

8.2 报错

Multiple configurations found:
    * D:/pratdemo/vue_demo/a_vue_Test/vue2_first_notest/jest.config.js
    * `jest` key in D:/pratdemo/vue_demo/a_vue_Test/vue2_first_notest/package.json

  Implicit config resolution does not allow multiple configuration files.
  Either remove unused config files or select one explicitly with `--config`.

  Configuration Documentation:
  https://jestjs.io/docs/configuration.html

Test environment found at "D:\pratdemo\vue_demo\a_vue_Test\vue2_first_notest\node_modules\jest-environment-jsdom-fifteen\lib\index.js" does not export a "getVmContext" method, which is mandatory from Jest 27. This method is a replacement for "runScript".

应对办法：删除项目中的jest.config.js文件即可。（是因为jest的配置已经放在package.json中了，因此不需要这个了）

9最后的package.json对照

基于vue2.0采用的jest单元测试的配置

{
  "name": "vue2_first_notest",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "test": "jest",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    },
    "testEnvironment": "jsdom"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "^4.5.15",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-airbnb": "^5.0.2",
    "@vue/test-utils": "^1.2.2",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^27.3.1",
    "babel-preset-env": "^1.7.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-vue": "^6.2.2",
    "jest": "^27.3.1",
    "jsdom": "^18.0.1",
    "jsdom-global": "^3.0.2",
    "vue-jest": "^3.0.7",
    "vue-template-compiler": "^2.6.11"
  }
}

若想了解更多其他单元测试和集成测试，请看如下：

# or:
vue add @vue/unit-mocha

# end-to-end
vue add @vue/e2e-cypress

# or:
vue add @vue/e2e-nightwatch

如有问题，可以留言评论！