단위 테스트

Vue CLI에는 즉시 사용 가능한 Jest 또는 Mocha를 사용한 단위 테스트용 옵션이 내장되어 있습니다. 또한 더 자세한 지침과 사용자 정의 설정을 제공하는 공식 Vue Test Utils도 있습니다. ㅋㅋㅋ 어설션 예외 단계 업데이트

간단한 어설션

테스트 가능성을 위해 컴포넌트에서 특별한 작업을 수행할 필요는 없으며 원래 설정을 내보내면 됩니다.

<template>
  <span>{{ message }}</span>
</template>

<script>
  export default {
    data () {
      return {
        message: 'hello!'
      }
    },
    created () {
      this.message = 'bye!'
    }
  }
</script>

expect

// 导入 Vue.js 和组件，进行测试
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'

// 这里是一些 Jasmine 2.0 的测试，你也可以使用你喜欢的任何断言库或测试工具。

describe('MyComponent', () => {
  // 检查原始组件选项
  it('has a created hook', () => {
    expect(typeof MyComponent.created).toBe('function')
  })
  
  // 评估原始组件选项中的函数的结果
  it('sets the correct default data', () => {
    expect(typeof MyComponent.data).toBe('function')
    const defaultData = MyComponent.data()
    expect(defaultData.message).toBe('hello!')
  })
  
  // 检查 mount 中的组件实例
  it('correctly sets the message when created', () => {
    const vm = new Vue(MyComponent).$mount()
    expect(vm.message).toBe('bye!')
  })
  
  // 创建一个实例并检查渲染输出
  it('renders the correct message', () => {
    const Constructor = Vue.extend(MyComponent)
    const vm = new Constructor().$mount()
    expect(vm.$el.textContent).toBe('bye!')
  })
})

많은 구성요소의 렌더링 출력은 소품에 따라 결정됩니다. 실제로 구성 요소의 렌더링된 출력이 해당 prop에 전적으로 의존하는 경우 다양한 매개 변수를 사용하여 순수 함수의 반환 값을 확인하는 것만큼 간단하게 테스트할 수 있습니다. 다음 예를 살펴보세요.

<template>
  <p>{{ msg }}</p>
</template>

<script>
  export default {
    props: ['msg']
  }
</script>

propsData 옵션을 통해 다양한 props에서 렌더링 출력을 주장할 수 있습니다.

import Vue from 'vue'
import MyComponent from './MyComponent.vue'

// 挂载元素并返回已渲染的文本的工具函数
function getRenderedText (Component, propsData) {
  const Constructor = Vue.extend(Component)
  const vm = new Constructor({ propsData: propsData }).$mount()
  return vm.$el.textContent
}

describe('MyComponent', () => {
  it('renders correctly with different props', () => {
    expect(getRenderedText(MyComponent, {
      msg: 'Hello'
    })).toBe('Hello')
    expect(getRenderedText(MyComponent, {
      msg: 'Bye'
    })).toBe('Bye')
  })
})

비동기식 주장 update

Vue의 DOM의 비동기 업데이트

로 인해 DOM 업데이트에 대한 일부 종속성 어설션 결과는 Vue.nextTick 콜백에서 이루어져야 합니다.

expect 断言作为示例)：

// 在状态更新后检查生成的 HTML
it('updates the rendered message when vm.message updates', done => {
  const vm = new Vue(MyComponent).$mount()
  vm.message = 'foo'
  
  // 在状态改变后和断言 DOM 更新前等待一刻
  Vue.nextTick(() => {
    expect(vm.$el.textContent).toBe('foo')
    done()
  })
})

编写可被测试的组件

很多组件的渲染输出由它的 props 决定。事实上，如果一个组件的渲染输出完全取决于它的 props，那么它会让测试变得简单，就好像断言不同参数的纯函数的返回值。看下面这个例子：

rrreee

你可以在不同的 props 中，通过 propsData 选项断言它的渲染输出：

rrreee

断言异步更新

由于 Vue 进行异步更新 DOM 的情况，一些依赖 DOM 更新结果的断言必须在 Vue.nextTickrrreee
자세한 Vue 단위 테스트를 보려면

Vue Test Utils

로 이동하고 Vue 구성 요소 에 대한 단위 테스트를 수행하세요. 님의 요리책 기사입니다.

단위 테스트

비동기식 주장 update

编写可被测试的组件

断言异步更新

PHP 중국어 웹사이트