This is the 20th day of my participation in the First Challenge 2022

Vue Test Til U is a utility that provides method tests for some Vue components.

Here are some basic ways to use it

Address of Vue test tool :test-utils.vuejs.org/guide/ This is for Vue 3

The installation

npm install --save-dev @vue/test-utils@next
Copy the code

Generally we are through the Vue CLI to create the project, can use the following command:

vue add @vue/unit-jest
Copy the code

See our test command in package.json

View the test/ Unit folder

You can see that there is an example file in this folder

Commonly used API

describe

Creating a block that groups multiple related tests together has two parameters, nameh and fn, commonly used as follows

describe('HelloWorld.vue'.() = >{... })Copy the code

test

You need to run all the methods of test in the test file. The API takes three parameters: the test name, the test function, and the test time (normally 0).

Such as:

test('ceshimingcheng'.() = >{... })/ / short
it('ceshimingcheng'.() = >{... })Copy the code

mount

First we’ll explicitly reference mount and hang it on the component

For example,

Where we can perform our tests

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

const wrapper = mount(Counter)
Copy the code

This gives us a Wrapper that allows us to access an instance of vue and create a Wrapper that contains the vue components to be mounted and rendered

shallowMount

As with mount, create a Wrapper containing the Vue components to be mounted and rendered, except the stubbed child components.

Mount is a complete render, directly attached to the child component, shallowMount requires us to deal with this layer separately. The following

describe('HelloWorld.vue'.() = > {
  it('renders props.msg when passed'.() = > {
    const msg = 'new message'
    const wrapper1 = mount(HelloWorld, {
      props: { msg }
    })
    const wrapper2 = shallowMount(HelloWorld, {
      props: { msg }
    })
    console.log(wrapper1.html())
    console.log(wrapper2.html())
    // expect(wrapper.text()).toMatch(msg)})})Copy the code

To be continued…..