Unit testing 如何让click或class在Jest单元测试中工作

我正在学习单元测试的笑话，我似乎遇到了障碍

我试图检查当我的菜单

a

被单击时，是否应用了“活动的”

class

这是我的代码：

HTML

 <div class="form-group">
        <div class="col-12">
          <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
              <a id="activeBlogs-tab" class="nav-link active" data-toggle="tab" href="#activeBlogs" role="tab"
                  aria-controls="activeBlogs" aria-selected="true" style="border-right: 1px solid lightgray">
                Active blogs
              </a>
            </li>
            <li class="nav-item">
              <a id="closedBlogs-tab" class="nav-link" data-toggle="tab" href="#closedBlogs" role="tab" aria-selected="false"
                  aria-controls="closedBlogs">
                Closed blogs
              </a>
            </li>
            <li id="addTab" class="nav-item ml-auto">
              <router-link to="/add" class="nav-link bg-info text-white" exact>Add a new blog</router-link>
            </li>
          </ul>
        </div>
      </div>

---

令人兴奋的是，您正在学习测试JS代码：）

2019年12月，Vue测试UTIL（v1.0.0-beta.30）中出现了一个错误，禁用了

sync

模式。这意味着DOM不会像我们使用Vue框架时那样在每次更改时重新呈现。我之所以分享这篇文章，是因为您可能已经阅读过的指南/教程可能已经“过时”

每当我们测试对DOM的更改时，我们都必须使用

wrapper.vm.$nextTick（）

手动触发重新呈现。这一变化加快了我们的测试套件的速度，因为它防止了在一次测试中可能出现的多重重新渲染

所以！你和这个非常接近：

fourthStar.trigger('click')
expect(fourthStar.classes()).toContain('active')

然而，它应该是这样的：

fourthStar.trigger('click')
await wrapper.vm.$nextTick()
expect(fourthStar.classes()).toContain('active')

请记住：测试的回调函数必须声明为异步，以允许使用wait关键字

为了您的方便，我准备了完整的复制+粘贴友好组件和测试：）

ClassComponent.vue

<template>
    <button class="btn" :class="{active: isActive}" @click="isActive = ! isActive">Click me</button>
</template>

<script>
    export default {
        data(){
            return {
                isActive: false
            }
        }
    }
</script>

---

注意async/await关键字

你是如何得到RAH的帮助的？

Expected: "nav-link active"
Received: ["nav-link"]

  59 |         fourthStar.trigger('click')
  60 |         //expect(fourthStar.classes()).toContain('active')
> 61 |         expect(fourthStar.classes()).toBe("nav-link active")
     |                                      ^
  62 | 
  63 |         // expect(wrapper.find('#activeBlogs-tab').attributes().class).toBe("nav-link")
  64 |         // expect(wrapper.find('#activeBlogs').attributes().class).toBe("tab-pane fade")

Expected value: "active"
Received array: ["nav-link"]

  58 |         const fourthStar = wrapper.find('#closedBlogs-tab')
  59 |         fourthStar.trigger('click')
> 60 |         expect(fourthStar.classes()).toContain('active')
     |                                      ^
  61 | 
  62 |         // expect(wrapper.find('#activeBlogs-tab').attributes().class).toBe("nav-link")
  63 |         // expect(wrapper.find('#activeBlogs').attributes().class).toBe("tab-pane fade")

fourthStar.trigger('click')
expect(fourthStar.classes()).toContain('active')

fourthStar.trigger('click')
await wrapper.vm.$nextTick()
expect(fourthStar.classes()).toContain('active')

<template>
    <button class="btn" :class="{active: isActive}" @click="isActive = ! isActive">Click me</button>
</template>

<script>
    export default {
        data(){
            return {
                isActive: false
            }
        }
    }
</script>

import {mount} from "@vue/test-utils";
import ClassComponent from "./ClassComponent";

it('applies active class when clicked', async () => {
    const wrapper = mount(ClassComponent)
    const button = wrapper.find('button')
    expect(button.classes()).not.toContain('active')
    button.trigger('click')
    await wrapper.vm.$nextTick()
    expect(button.classes()).toContain('active')
});