Jest/Vue Utils测试动态导入组件无法生成快照如何解决？

动态import()加载的组件属于Vue异步组件，组件挂载阶段不会同步完成解析加载，未加载完成前Vue会渲染注释节点作为占位。现有测试用例在mount后立刻执行快照断言，此时异步组件还处于加载中状态，因此只能拿到空注释节点的快照结果。

可根据项目实际情况二选一：

• 方案1：测试用例中显式等待异步组件加载完成
  借助Vue Test Utils内置的flushPromises方法，等待所有异步加载逻辑、微任务队列执行完成后再执行断言即可。修正后的测试代码如下：

import { mount, flushPromises } from '@vue/test-utils'
import TargetComponent from './your-component-path.vue'

it('renders correctly', async () => {
  const wrapper = mount(TargetComponent, {
    props: {
      type: 'dog' // 传入必填的type属性，匹配要加载的子组件
      // 其余测试需要的props、挂载配置按实际场景补充
    }
  })
  // 等待所有动态import加载、异步队列执行完成
  await flushPromises()
  // Vue 2.x 环境请追加这一句，等待DOM完成最终更新：
  // await wrapper.vm.$nextTick()

  // 异步组件加载完成后再生成快照
  expect(wrapper.element).toMatchSnapshot()
})

注意事项：测试时必须传入组件要求的type prop，若传入值为空或不在组件的components映射表中，计算属性会返回undefined，组件本身就会渲染空注释节点，和异步加载问题无关。

• 方案2：测试环境配置层面将异步导入转为同步加载
  如果项目中异步组件使用频次较高，不想在每个测试用例中手动编写等待逻辑，可以通过babel配置让测试环境下的动态import()转为同步require加载，从根源消除异步等待成本。
  1. 安装开发依赖：

  npm i babel-plugin-dynamic-import-node -D
  

  2. 在babel配置中为test环境开启该插件：

// babel.config.js
module.exports = {
  // 项目原有通用babel配置保持不变
  env: {
    test: {
      plugins: ['dynamic-import-node']
    }
  }
}

配置完成后重启Jest即可生效，测试环境下所有动态导入的组件都会被同步加载，mount后可直接拿到完整渲染结果，无需额外等待。

内容的提问来源于stack exchange，提问作者Jon O'Reilly