Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to unit test Vue components". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Let's first briefly explain the unit test: it tests the input and output of the function and uses assertions to determine whether the result of the use case we input is the same as that of our actual input.

The unit testing of a component is to use a unit testing tool to test the various states and behaviors of the component.

Benefits of component unit testing

Provide documentation that describes the behavior of components

Save time on manual testing

Reduce the bug generated when developing new features

Improve the design

Promote reconstruction

Preparatory work

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

Installation dependency

Vue Test Utils (learn video sharing: vuejs tutorial)

Npm install-save-dev jsdom jsdom-global

Jest

Npm install-save-dev jest

Vue-jest

Npm install save-dev @ vue/vue2-jest # (use the appropriate version)

Babel-jest

Yarn add-- dev babel-jest @ babel/core

Installation test dependency

Yarn add jest @ vue/test-utils vue-jest babel-jest-D-W

There is a slight problem here. If you use the issued command for installation, there will be a little bit of error.

Yarn add jest @ vue/test-utils vue-jest babel-jest-D

Screenshot of error:

Configuration of Jest

Jest.config.js

Module.exports = {"testMatch": ["* * / _ tests__/**/*. [jt] s? (X)"], "moduleFileExtensions": ["js", "json", / / tell Jest to process `* .vue` file "vue"], "transform": {/ / use `vue` to process` * .vue` file ". *\\. (vue) $": "vue-jest" / / use `babel- jest` to process js ". *\. (js) $": "babel-jest"}}

Based on the configuration of the test file above, we will place the configuration of each test file under _ _ tests__

Create a test case:

We tested using the input component of: packages\ input

Create an input.test.js after creating the _ _ tests__ folder under the packages\ input folder

Here, let's popularize some commonly used API.

Test case 1 determines whether it is a text box

Import input from'.. / src/input.vue'import {mount} from'@ vue/test-utils' / / Mount describe ('lg-input', () = > {test (' input-text', () = > {const wrapper = mount (input) expect (wrapper.html ()) .toContain ('input type= "text"')})

Here we need to mount using the mount method provided by @ vue/test-utils. Note that this is only mounted in memory, and we need to save the content returned by the wrapper.

Const wrapper = mount (input)

This use case is simple, just want to know if we are producing a text box, here a simple test case is written, and then let's run it:

Yarn test

Running result

Modify use case

Expect (wrapper.html ()) .toContain ('input type= "tex123123123t"')

Running result

The test failed, indicating that the content of input type= "tex123123123t" could not be found, as expected, no problem.

Test case 2 determines whether it is a password box

Test ('input-password', () = > {const wrapper = mount (input, {propsData: {type:' password'}}) expect (wrapper.html ()) .toContain ('input type= "password")})

We can set the props property of the component through propsData

Running result

Test case 3 component to see if the value is correct

Test ('input-password', () = > {const wrapper = mount (input, {propsData: {type:' password', value: 'admin'}}) expect (wrapper.props (' value')) .toBe ('admin')})

Here, we get his props attribute through wrapper.props, and after getting this value, we make a judgment.

Running result

Use of test case 4 snapshots

Test ('input-snapshot', () = > {const wrapper = mount (input, {propsData: {type:' text', value: 'admin'}}) expect (wrapper.vm.$el) .toMatchSnapshot ()})

We are going to take a snapshot of the mounted dom object, and the first time we call this method, it will mount the content into a special text file, and when we produce the test again, we will compare the file we have just stored. If there is a change, the test will fail.

File structure:

Modify the propsData of a snapshot

PropsData: {type: 'password', value:' admin'}

Test result

Delete snapshot results and regenerate

This is the end of yarn test-u "how to unit test Vue components". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.