Qu'est-ce que les tests unitaires ? Comment tester unitairement les composants Vue ?

npm install --save-dev jsdom jsdom-global

npm install --save-dev jest

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

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

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

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

module.exports = {
  "testMatch": ["**/__tests__/**/*.[jt]s?(x)"],
  "moduleFileExtensions": [
    "js",
    "json",
    // 告诉 Jest 处理 `*.vue` 文件
    "vue"
  ],
  "transform": {
    // 用 `vue-jest` 处理 `*.vue` 文件
    ".*\\.(vue)$": "vue-jest",
    // 用 `babel-jest` 处理 js
    ".*\\.(js)$": "babel-jest" 
  }
}

import input from '../src/input.vue'
import { mount } from '@vue/test-utils' // 挂载

describe('lg-input', () => {
  test('input-text', () => {
    const wrapper = mount(input)
    expect(wrapper.html()).toContain('input type="text"')
  })
})

const wrapper = mount(input)

yarn test

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

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

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

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

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

yarn test -u