vue unit test

vue unit_test

jest

Refer to the official website description https://vue-test-utils.vuejs.org/zh/installation/

1. Browser environment

npm install --save-dev jsdom jsdom-global

// In the setting / entry of the test (this sentence is wrong, don't worry about it)
require('jsdom-global')()

2. The first thing we need to do is to install Jest and Vue Test Utils:

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

3. Then we need to define a unit test script in package.json.

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

4. To tell Jest how to handle *. vue files, we need to install and configure the vue Jest preprocessor:

npm install --save-dev vue-jest

Next, create a jest block in package.json:

{
  // ...
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      // Tell Jest to process ` *. vue 'files
      "vue"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "transform": {
      // Process ` *. vue 'files with ` vue jest'
      ".*\\.(vue)$": "vue-jest"
    }
  }
}

5. Configure Babel for Jest

Although the latest version of Node already supports most of the ES2015 features, you may still want to use the ES modules syntax and stage-x features in your tests. To do this, we need to install Babel jest:

npm install --save-dev babel-jest

Next, we need to add an entry in jest.transform of package.json to tell Jest to process JavaScript test files with Babel Jest:

{
  // ...
  "jest": {
    // ...
    "transform": {
      // ...
      // Handle js with 'Babel jest'
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    }
    // ...
  }
}

Example. babelrc file:

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

6. Place test documents

By default, Jest will recursively find all files with. spec.js or. test.js extensions in the whole project. If this does not meet your needs, you can also in the configuration section of package.json Change its testRegex

6. Test coverage

Jest can be used to generate test coverage reports in multiple formats. Here is an example of a simple start:

Extend your jest configuration (usually in package.json or jest.config.js) collectCoverage Options, and then add collectCoverageFrom Array to define the files that need to collect test coverage information.

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

This will turn on Test coverage report in default format . You can customize them with the coverage reporters option.

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

For more documentation, move to Jest configuration document , where you can find options such as coverage threshold, target output directory, etc.

7. Test specification example

If you are already familiar with Jasmine, you should adapt to Jest Assertion 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. Operation test

npm run test

8.1. Collection of error reports

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

Solution: add in package.json

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

8.2 error reporting

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".

9 Final package.json comparison

Configuration of jest unit test based on vue2.0

{
  "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"
  }
}

To learn more about other unit tests and integration tests, see the following:

# or:
vue add @vue/unit-mocha

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

# or:
vue add @vue/e2e-nightwatch

If you have any questions, you can leave a comment!