如何使用Testing Library测试带Vuex的Vue组件Watcher？

问题描述 #

我在使用testing-library测试带有Vuex的Vue组件时遇到了问题。组件代码如下：

<template lang="pug">
  div
</template>

<script>
  import { mapState } from 'vuex'
  import NProgress from 'nprogress'

  export default {
    computed: mapState(['scraping']),
    watch: {
      scraping: scraping => {
        if (scraping) NProgress.start()
        else NProgress.done()
      }
    },
    created () {
      NProgress.configure({
        speed: 50,
        showSpinner: false,
        trickleSpeed: 50
      })
    }
  }
</script>

原本计划的测试逻辑是：渲染scraping状态设为true的组件，监听NProgress的方法并验证其调用情况，随后将scraping设为false并检查NProgress.done()是否被调用。但实际测试中，Watcher似乎并未触发，连初始的start()方法都未执行，只有configure()被调用。请问等待Watcher因状态变更触发的最佳方案是什么？

我的测试代码如下：

import { render } from '@testing-library/vue'
import '@testing-library/jest-dom'
import { createStore } from 'vuex'
import NProgress from 'nprogress'
import ScrapeProgress from './ScrapeProgress.vue'

const spyConfigure = vi.spyOn(NProgress, 'configure')
const spyStart = vi.spyOn(NProgress, 'start')
const spyDone = vi.spyOn(NProgress, 'done')

const store = createStore({
  state: {
    scraping: true
  },
  mutations: {
    switch (state) {
      state.scraping = !state.scraping
    }
  }
})

describe('ScrapeProgress', async () => {
  afterEach(() => {
    vi.restoreAllMocks()
  })

  it('default view', async () => {
    const el = render(ScrapeProgress, {
      global: {
        plugins: [store]
      }
    })
    expect(spyConfigure).toHaveBeenCalled()
    expect(spyStart).toHaveBeenCalled() // THIS FAILS!
    store.commit('switch')
    expect(store.state.scraping).toBe(false)
    expect(spyDone).toHaveBeenCalled()
  })
})

问题原因 #

1. Vue的watch默认不会在初始值加载时触发，除非显式设置immediate: true。组件中监听scraping的watch未配置该选项，因此初始scraping: true不会触发回调，NProgress.start()自然不会执行。
2. Vue的响应式状态更新是异步的，测试中同步断言会在watch回调执行前完成，导致断言失败。

解决步骤 #

1. 给组件的watch添加immediate: true #

修改组件的watch配置，让它在组件初始化时就执行一次回调：

watch: {
  scraping: {
    handler(scraping) {
      if (scraping) NProgress.start()
      else NProgress.done()
    },
    immediate: true // 关键：初始加载时触发watch
  }
},

2. 测试中使用waitFor等待异步更新 #

利用Testing Library的waitFor工具等待Vue完成更新周期，确保watch回调执行后再进行断言：

import { render, waitFor } from '@testing-library/vue' // 引入waitFor
import '@testing-library/jest-dom'
import { createStore } from 'vuex'
import NProgress from 'nprogress'
import ScrapeProgress from './ScrapeProgress.vue'

describe('ScrapeProgress', () => {
  let store
  let spyConfigure
  let spyStart
  let spyDone

  // 每个测试前重置spy和store，避免测试污染
  beforeEach(() => {
    spyConfigure = vi.spyOn(NProgress, 'configure')
    spyStart = vi.spyOn(NProgress, 'start')
    spyDone = vi.spyOn(NProgress, 'done')
    
    store = createStore({
      state: {
        scraping: true
      },
      mutations: {
        switch(state) {
          state.scraping = !state.scraping
        }
      }
    })
  })

  afterEach(() => {
    vi.restoreAllMocks()
  })

  it('triggers NProgress on scraping state change', async () => {
    render(ScrapeProgress, {
      global: {
        plugins: [store]
      }
    })

    // 验证configure初始化调用
    expect(spyConfigure).toHaveBeenCalled()
    
    // 等待初始watch触发，验证start调用
    await waitFor(() => {
      expect(spyStart).toHaveBeenCalled()
    })

    // 触发状态变更
    store.commit('switch')
    expect(store.state.scraping).toBe(false)

    // 等待watch响应状态变更，验证done调用
    await waitFor(() => {
      expect(spyDone).toHaveBeenCalled()
    })
  })
})

额外注意事项 #

• 不要在describe上标注async，仅在测试用例it内部使用async即可。
• 将spy和store的创建移至beforeEach，确保每个测试都拥有独立、干净的环境，避免跨测试的mock污染。
• waitFor会自动处理Vue的异步更新，确保watch回调执行完成后再进行断言，避免因时序问题导致的测试失败。

内容的提问来源于stack exchange，提问作者vicusbass