Vue Test Utils

重要通知

基本概况

Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。

• 中文官网Vue2: https://v1.test-utils.vuejs.org/zh/

• 中文官网Vue3: https://test-utils.vuejs.org/

• Cypress Component Testing: https://docs.cypress.io/guides/component-testing/overview

• Testing Library: https://testing-library.com/docs/vue-testing-library/intro/

代码示例

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


// The component to test
const MessageComponent = {
  template: '<p>{{ msg }}</p>',
  props: ['msg']
};

test('displays message', () => {
  const wrapper = mount(MessageComponent, {
    props: {
      msg: 'Hello world'
    }
  });

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Hello world');
});

API列表

mount

// 第三方资源类库或插件
import { mount } from '@vue/test-utils';

// 局部资源库
import tablePagination from '../table-pagination.vue';


/**
 * @当前业务
 * 具体逻辑实现代码
 */
test('mounts a component', () => {
  const wrapper = mount(tablePagination, {
    props: {
      name: "属性"
    }
  });

  // 查找元素
  const todo = wrapper.get('[data-test="todo"]')
  expect(todo.text()).toBe('Learn Vue.js 3')


  expect(wrapper.text()).toContain('Hello world');
  expect(wrapper.html()).toContain('Hello world');

  expect(wrapper.attributes('id')).toBe('foo')
  expect(wrapper.attributes('class')).toBe('bar')

  expect(wrapper.classes()).toContain('my-span')
  expect(wrapper.classes('my-span')).toBe(true)

  expect(wrapper.emitted()).toHaveProperty('greet')
  expect(wrapper.emitted().greet).toHaveLength(2)
  expect(wrapper.emitted().greet[0]).toEqual(['hello'])
  expect(wrapper.emitted().greet[1]).toEqual(['goodbye'])

  expect(wrapper.find('span').exists()).toBe(true)
  expect(wrapper.find('p').exists()).toBe(false)


  wrapper.find('span') //=> found; returns DOMWrapper
  wrapper.find('[data-test="span"]') //=> found; returns DOMWrapper
  wrapper.find({ ref: 'span' }) //=> found; returns DOMWrapper
  wrapper.find('p') //=> nothing found; returns ErrorWrapper


  const thirdRow = wrapper.findAll('span')[2]

  wrapper.findComponent('.foo')
  wrapper.findComponent('[data-test="foo"]')
  wrapper.findComponent({ name: 'Foo' })
  wrapper.findComponent({ ref: 'foo' })
  wrapper.findComponent(Foo)


  wrapper.findAllComponents('[data-test="number"]')


  wrapper.get('span') //=> found; returns DOMWrapper
  expect(() => wrapper.get('.not-there')).toThrowError()


  expect(wrapper.find('span').isVisible()).toBe(false);


  expect(foo.props('truthy')).toBe(true)
  expect(foo.props('object')).toEqual({})
  expect(foo.props('notExisting')).toEqual(undefined)
  expect(foo.props()).toEqual({
    truthy: true,
    object: {},
    string: 'string'
  })


  await wrapper.setData({ count: 1 })
  expect(wrapper.html()).toContain('Count: 1')


  await wrapper.setProps({ message: 'goodbye' })
  expect(wrapper.html()).toContain('goodbye')


  await wrapper.find('input[type="checkbox"]').setValue(true)
  expect(wrapper.find('div').exists()).toBe(true)

  await wrapper.find('input[type="checkbox"]').setValue(false)
  expect(wrapper.find('div').exists()).toBe(false)

  await wrapper.find('select').setValue('value1')
  await wrapper.find('select').setValue(['value1', 'value3'])


  // 触发 DOM 事件
  await wrapper.find('button').trigger('click')
  expect(wrapper.find('span').text()).toBe('Count: 1')





  // 指定要挂载组件的节点。
  const wrapper = mount(tablePagination, {
    attachTo: document.getElementById('app')
  });

  expect(document.body.innerHTML).toBe(`
    <div>
      <h1>Non Vue app</h1>
      <div id="app"><div data-v-app=""><p>Vue Component</p></div></div>
    </div>
  `);

});

vue-testing-library

• GitHub: https://github.com/testing-library/vue-testing-library/
• 技术文档: https://testing-library.com/docs/vue-testing-library/intro/

安装配置

> yarn add -D @testing-library/vue