如何测试Pinia状态变更后Vue组件是否已渲染？

问题原因 #

1. Vue的响应式DOM更新是异步的，修改状态后立即断言，DOM还未完成更新。
2. 提前获取的toolbar变量是状态变更前的DOM引用，状态改变后没有重新查询。
3. Transition组件的过渡动画可能延迟DOM渲染，导致断言时机过早。

修复方案 #

1. 等待DOM更新并重新查询组件

修改测试用例，在状态变更后等待Vue完成DOM更新，再重新查找目标组件：

it('displays the toolbar when menuIsActive is true', async () => {
  // 初始状态验证
  expect(wrapper.findComponent(BaseNavToolbar).exists()).toBe(false);

  store.menuIsActive = true;
  // 等待Vue异步更新DOM
  await wrapper.vm.$nextTick();
  
  // 重新查询组件并断言
  expect(wrapper.findComponent(BaseNavToolbar).exists()).toBe(true);
});

2. 禁用Transition过渡（可选，加速测试）

如果过渡动画不影响测试逻辑，可mockTransition组件直接渲染子元素，避免等待过渡时间：

// 在测试文件顶部添加mock组件
import { h } from 'vue';
const mockTransition = {
  render() {
    return h('div', this.$slots.default);
  }
};

// 挂载组件时注册mock
const wrapper = mount(LayoutToggleToolbar as any, {
  props: { items },
  global: {
    plugins: [testPinia],
    components: { 
      BaseNavToolbar,
      Transition: mockTransition // 替换原生Transition
    }
  }
});

3. 修正Pinia初始状态配置（关键）

createTestingPinia的initialState需要对应store的ID，比如你的LayoutStore的ID是layout，则初始状态需嵌套在对应key下：

const testPinia = createTestingPinia({
  initialState: { layout: { menuIsActive: false } }
});

完整修复后的测试代码 #

import { mount } from '@vue/test-utils';
import { describe, it, expect } from 'vitest';
import { createTestingPinia } from '@pinia/testing';
import { useLayoutStore } from '../store';
import { h } from 'vue';

import LayoutToggleToolbar from './index.vue';
import BaseNavToolbar from '@/components/base/nav/toolbar/index.vue';

const mockTransition = {
  render() {
    return h('div', this.$slots.default);
  }
};

describe('LayoutToggleToolbar', () => {
  const items = [{ text: 'Page 1' }, { text: 'Page 2' }, { text: 'Page 3' }];

  it('displays the toolbar when menuIsActive is true', async () => {
    const testPinia = createTestingPinia({
      initialState: { layout: { menuIsActive: false } }
    });

    const wrapper = mount(LayoutToggleToolbar as any, {
      props: { items },
      global: {
        plugins: [testPinia],
        components: { BaseNavToolbar, Transition: mockTransition }
      }
    });

    const store = useLayoutStore();

    expect(wrapper.findComponent(BaseNavToolbar).exists()).toBe(false);

    store.menuIsActive = true;
    await wrapper.vm.$nextTick();
    
    expect(wrapper.findComponent(BaseNavToolbar).exists()).toBe(true);
  });
});

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