vue单元测试入门集锦

• Use mount() to render a component.

• Use get() and findAll() to query the DOM.

• trigger() and setValue() are helpers to simulate user input.

• Updating the DOM is an async operation, so make sure to use async and await.

• Testing usually consists of 3 phases; act, arrange and assert.

1.Use mount() to render a component.

test("with mount", () => {
   const mount = mount(Parent)
});

2.Use get() and findAll() to query the DOM.

test('should ', () => {
    const wrapper = mount(Todo)
    expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(1)
});

3.trigger() and setValue() are helpers to simulate user input.

test('should ', async () => {
    const wrapper = mount(Todo)
    await wrapper.find('[data-test="new-todo"]').setValue('122323')
    await wrapper.find('[data-test="new-todo"]').trigger('change')    const classes = wrapper.findAll('[data-test="todo"]')[0]
    expect(classes.classes()).toContain('completed’)
    expect(wrapper.componentVM.cc).toEqual('122323’)
});

• Use find() along with exists() to verify whether an element is in the DOM.

• Use get() if you expect the element to be in the DOM.

• The data mounting option can be used to set default values on a component.

• Use get() with isVisible() to verify the visibility of an element that is in the DOM

1.Use find() along with exists() to verify whether an element is in the DOM.

2.Use get() or find() if you expect the element to be in the DOM.

test('3', () => {
    const wrapper = mount(Nav)
    expect(wrapper.find("#admin").exists()).toBeFalsy()
});

3.The data mounting option can be used to set default values on a component.

test('dfdf', () => {
const wrapper = mount(Nav,{
    data(){
            return{
                admin: true
            }
        }
    })
    expect(wrapper.find('#admin').text()).toEqual('Admin')
});

4.Use get() or find() with isVisible() to verify the visibility of an element that is in the DOM

test('should ', () => {
    const wrapper = mount(Nav)
    expect(wrapper.find('#user-dropdown').isVisible()).toBeFalsy()
});

• Use emitted() to access the events emitted from a Vue component.

• emitted(eventName) returns an array, where each element represents one event emitted.

• Arguments are stored in emitted(eventName)[index] in an array in the same order they are emitted.

  test('should ', () => { const wrapper = mount(Handle) wrapper.find('button').trigger('click') const list = wrapper.emitted('increment') expect(list[0]).toEqual([1]) });

• use the props and data mounting options to pre-set the state of a component.

• Use setProps() to update a prop during a test.

• Use the await keyword before setProps() to ensure the Vue will update the DOM before the test continues.

• Directly interacting with your component can give you greater coverage. Consider using setValue or trigger in combination with data to ensure everything works correctly.

1.use the props and data mounting options to pre-set the state of a component.

2.Use setProps() to update a prop during a test.

test('should ', () => {
const wrapper = mount(Password, {
    props: {
        minLength: 5
    },
    data(){
            return {
                password: 'shro'
            }
        }
    })
    expect(wrapper.html()).toContain('Password must be at least 5 characters')
});

3.Use the await keyword before setProps() to ensure the Vue will update the DOM before the test continues.

4.Use setProps() to update a prop during a test.

test('should ', async () => {
    const wrapper = mount(SetProps)
    expect(wrapper.html()).toContain('Hello')
    await wrapper.setProps({
        show: false
    })
    expect(wrapper.html()).not.toContain('Hello')
});

• Use setValue to set the value on both DOM inputs and Vue components.

• Use trigger to trigger DOM events, both with and without modifiers.

• Add extra event data to trigger using the second parameter.

• Assert that the DOM changed and the right events got emitted. Try not to assert data on the Component instance.

1.Use setValue to set the value on both DOM inputs and Vue components.

test('should ', async () => {
    const mount = mount(Form)
    const input = mount.find('input')
    await input.setValue('my@mail.com')
    expect(input.element.value).toBe('my@mail.com')
});

2.Use trigger to trigger DOM events, both with and without modifiers.

test('trigger', async () => {
    const wrapper = mount(Form)
    const button = wrapper.find('button')
    await button.trigger('click')
    expect(wrapper.emitted()).toHaveProperty('submit')
});

3.Add extra event data to trigger using the second parameter.

test('emitsthe input to tis parent',async ()=>{
    const wrapper = mount(Form);
    await wrapper.find('input').setValue('myinput')
    
    await wrapper.find('button').trigger('click')
    expect(wrapper.emitted('submit')[0][0]).toBe('myinput')
})