Make writing a habit together! This is the second day of my participation in the “Gold Digging Day New Plan · April More text challenge”. Click here for more details.

Unit testing of Vue components

Let’s start with a brief explanation of unit testing: testing the input and output of a function, using assertions to determine whether the result of the use case we entered is the same as the result of the actual input

Unit testing of components is to use unit testing tools to test various states and behaviors of components

Benefits of component unit testing

  • Provide documentation that describes the behavior of the component
  • Saves time on manual testing
  • Reduce bugs when developing new features
  • To improve the design
  • Promote the refactoring

The preparatory work

Before we can do the unit test simulation, we need to do some configuration for the environment

Install dependencies

  • Vue Test Utils
npm install --save-dev jsdom jsdom-global
Copy the code
  • Jest
npm install --save-dev jest
Copy the code
  • vue-jest
npm install --save-dev @vue/vue2-jest # (use the appropriate version)
Copy the code
  • babel-jest
yarn add --dev babel-jest @babel/core
Copy the code

Install test dependencies

yarn add jest @vue/test-utils vue-jest babel-jest -D -W
Copy the code

There is a slight glitch here, if you use the issued command to install a small error

yarn add jest @vue/test-utils vue-jest babel-jest -D
Copy the code

Error screenshot:

Jest configuration

jest.config.js

module.exports = {
  "testMatch": ["**/__tests__/**/*.[jt]s? (x)"]."moduleFileExtensions": [
    "js"."json".// tell Jest to process the '*.vue' file
    "vue"]."transform": {
    // Use 'vue-jest' to process '*. Vue' files
    ".*\\.(vue)$": "vue-jest".// process js with 'babel-jest'
    ".*\\.(js)$": "babel-jest"}}Copy the code

Babel’s configuration

babel.config.js

module.exports = {
  presets: [['@babel/preset-env']]}Copy the code

The Babel of bridge

yarn add babel-core@bridge -D -W
Copy the code

Install Rollup and the required plug-ins

Yarn add rollup rollup-plugin-terser [email protected] vue- template-compiler-d-wCopy the code

Rollup configuration file

Create rollup.config.js in the button directory

import { terser } from 'rollup-plugin-terser'
import vue from 'rollup-plugin-vue'

module.exports = [
  {
    input: 'index.js'.output: [{file: 'dist/index.js'.format: 'es'}].plugins: [
      vue({
        // Dynamically inject css as a <style> tag
        css: true.// Explicitly convert template to render function
        compileTemplate: true
      }),
      terser()
    ]
  }
]
Copy the code

Configure the build script and run it

Find the scripts configuration for package.json in the Button package

"build": "rollup -c"
Copy the code

Run packaging

yarn workspace lg-button run build
Copy the code

Package all components

Install dependencies

yarn add @rollup/plugin-json rollup-plugin-postcss @rollup/plugin-node-resolve -D -W
Copy the code

The configuration file

The project root directory creates rollup.config.js

. This configuration is too much, I will send the code to my own file library, then you can access the address under the article to view gitee.com/liuyinghao1…

Set the main and Module fields in package.json in each package

"main": "dist/cjs/index.js"."module": "dist/es/index.js"
Copy the code

Configure scripts in package.json in the root directory

"build": "rollup -c"
Copy the code

Create test cases:

Project address: gitee.com/liuyinghao1…

We use the Input component of: Packages \ Input for testing

Create input.test.js after creating the __tests__ folder under Packages \input folder

Here are a few commonly used apis for you

Test cases:

import input from '.. /src/input.vue'
import { mount } from '@vue/test-utils' / / a mount

describe('lg-input'.() = > {
  test('input-text'.() = > {
    const wrapper = mount(input)
    expect(wrapper.html()).toContain('input type="text"')})})Copy the code

This use case is very simple, just want to know if we produce a text box, here is a simple test case, then we run:

yarn test
Copy the code

It passes, and then we modify it a little bit

expect(wrapper.html()).toContain('input type="tex123123123t"')
Copy the code

Test it again

Test to fail

conclusion

This is the end of our unit testing Demo. Unit testing is still very important for our componentized development. With stroyBooks, we can do a lot