13.vue中使用jest

一、环境的配置

src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

jest.config.js

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
  testMatch: [
    '**/__tests__/**/*.(js|jsx|ts|tsx)'
  ]
}

tests/unit/HelloWorld.test.js

import Vue from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const root = document.createElement('div')
    root.className = 'root'
    document.body.appendChild(root)
    new Vue({
      render: h => h(HelloWorld, {
        props: {
          msg: 'dell lee'
        }
      })
    }).$mount('.root')
    expect(document.getElementsByClassName('hello').length).toBe(1)
  })
})

二、使用@vue/test-utils

1、shallowMount 单元测试 ：会使用占位符占住HelloWorld的子组件，只渲染HelloWorld这个组件

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

it('renders props.msg when passed', () => {
    const msg = 'dell lee'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.props('msg')).toEqual(msg)
    expect(wrapper.text()).toMatch(msg)
    expect(wrapper.findAll('.mm').length).toBe(1)
    expect(wrapper.setProps({ msg: 'hello' }))
    expect(wrapper.props('msg')).toEqual('hello')
  })

  it('组件渲染正常', () => {
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg: 'dell lee' }
    })
    expect(wrapper).toMatchSnapshot()
  })