单元测试一个 Vue 组件答案

【问题标题】：unit testing a vue component单元测试一个 Vue 组件
【发布时间】：2021-09-22 15:00:46
【问题描述】：

我有一个看起来像这样的组件，

<template>
<!-- eslint-disable vue/no-v-html -->
<div class="c-dialog" :class="{'u-block': show}" @triggerOpen="handleOpen">
    <div class="c-dialog__background" @click="handleClose">
        <div class="c-dialog__wrapper u-mt-4 u-mb-1">
            <div class="c-dialog__action u-flex">
                <button class="c-dialog__close u-bg-denim-blue u-border-0 u-text-white" @click="handleClose">Close</button>
            </div>
            <div class="c-dialog__main u-px-2 u-py-4 u-border u-bg-white">
                <h4>{{ content.title }}</h4>
                <div class="c-dialog__content u-mt-2" v-html="content.content" />
            </div>
        </div>
    </div>
</div>

我想对它进行单元测试，但是在单元测试方面我很生疏，组件非常简单，根据数据值显示或隐藏（显示：真/假）。

我假设我需要 1 次测试来断言组件在 show = false 时隐藏，而另一个测试在 show = true 时断言模式可见。但是在一个如此简单的组件中，我应该对其他任何东西进行单元测试吗？组件handleClose（设置显示为false）和handleOpen（设置显示为true）中有2个方法，这些方法是否也需要自己的测试？到目前为止，我的测试看起来像，

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

test('Dialog', () => {

});

【问题讨论】：

标签： javascript vue.js unit-testing

【解决方案1】：

这样的东西应该测试打开/关闭状态。

您也可以使用jest.spy 来查看是否调用了正确的方法，但是在这种情况下测试结果应该没问题。

v-html 也可以考虑测试。

snapshot tests 非常适合查看状态是否正确更改，并且它正在隐式测试您的班级分配。

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

function mountWith() {
  return shallowMount(Dialog, {
    data() {
      return {
        open: false,
        ...data
      }
    }
  });
}

describe('Dialog', () => {
  let wrapper;

  afterEach(() => {
    wrapper.destroy()
  })

  it('should mount successfully', () => {
    wrapper = mountWith()
    
    expect(wrapper.exists()).toBe(true)
  });
  
  it('should match snapshot in initial state', () => {
    wrapper = mountWith()
    
    expect(wrapper).toMatchSnapshot()
  });
  
  it('should match snapshot while open', () => {
    wrapper = mountWith({ open: true })
    
    expect(wrapper).toMatchSnapshot()
  });

  it('should open on c-dialog click', async () => {
    wrapper = mountWith()
    wrapper.find('.c-dialog').trigger('click');
    await Vue.nextTick()

    expect(wrapper.vm.open).toBe(true)
  });
  
  it('should close on background click ', async () => {
    wrapper = mountWith({ open: true })
    wrapper.find('.c-dialog__background').trigger('click');
    await Vue.nextTick()

    expect(wrapper.vm.open).toBe(false)
  });

  it('should close on dialog close click ', async () => {
    wrapper = mountWith({ open: true })
    wrapper.find('.c-dialog__close').trigger('click');
    await Vue.nextTick()

    expect(wrapper.vm.open).toBe(false)
  });  
});

【讨论】：