测试含async函数的Vue组件时出现TypeError: Cannot read property 'type' of null

问题概述 #

测试ComponentA.spec.js时触发TypeError: Cannot read property 'type' of null错误，移除ComponentA中getData()函数内的await关键字后组件可正常运行，即使已经mock了getData接口调用，问题仍未解决。

完整报错栈 #

at assert (node_modules/@babel/types/lib/asserts/generated/index.js:284:112)
at Object.assertIdentifier (node_modules/@babel/types/lib/asserts/generated/index.js:373:3)
at new CatchEntry (node_modules/regenerator-transform/lib/leap.js:93:5)
at Emitter.Ep.explodeStatement (node_modules/regenerator-transform/lib/emit.js:535:36)
at node_modules/regenerator-transform/lib/emit.js:323:12
    at Array.forEach (<anonymous>)
at Emitter.Ep.explodeStatement (node_modules/regenerator-transform/lib/emit.js:322:22)
at Emitter.Ep.explode (node_modules/regenerator-transform/lib/emit.js:280:40)

待测试组件代码（ComponentA.vue） #

<template>
  <div class="d-flex flex-row">
    <component-b />
    <component-c />
  </div>
</template>

<script>
import ComponentB from './ComponentB';
import ComponentC from './ComponentC';
import { getData } from 'apis';
export default {
  name: 'component-a',
  components: {
    ComponentB,
    ComponentC,
  },
  async created() {
    await this.getData();
  },
  methods: {
    // 问题出在这个函数里
    async getData() {
      try {
        const response = await getData();
      } catch {
        // 空catch块
      }
    },
  },
};
</script>

测试代码（ComponentA.spec.js） #

import Vuetify from 'vuetify';
import ComponentA from 'components/ComponentA';
import { createLocalVue, shallowMount, mount } from '@vue/test-utils';

jest.mock('shared/apis', () => {
  const data = require('../fixedData/data.json');

  return {
    getData: jest.fn().mockResolvedValue(data),
  };
});

const localVue = createLocalVue();
let vuetify;

function createShallowWrapper(options = {}) {
  return shallowMount(ComponentA, {
    localVue,
    vuetify,
    ...options,
  });
}

beforeEach(() => {
  vuetify = new Vuetify();
});

describe('ComponentA', () => {
  describe('component creation', () => {
    test('testing', () => {
      const wrapper = createShallowWrapper();
      expect(wrapper).toMatchSnapshot();
    });
  });
});

问题原因 #

这个错误来自regenerator-transform（Babel处理async/await语法的核心依赖），根源是无参数的空catch块（catch { ... }）。旧版本的regenerator-transform无法正确解析这种ES6+语法，在转译阶段会抛出类型断言错误，和你是否mock接口无关——因为错误发生在测试执行前的代码转译环节。

解决方案 #

方案1：给catch块添加参数（最简单有效） #

修改getData函数的catch块，添加一个参数（即使你不需要使用它）：

async getData() {
  try {
    const response = await getData();
  } catch (err) { // 添加err参数
    // 保持原有逻辑或添加错误处理
  }
}

修改后重新运行测试，转译错误会消失，mock的getData也能正常生效。

方案2：升级相关Babel依赖 #

如果必须保留无参数的catch语法，可以升级regenerator-transform及关联的Babel包到最新稳定版：

• 检查package.json中的regenerator-transform、@babel/plugin-transform-runtime、@babel/preset-env版本
• 执行npm update regenerator-transform @babel/plugin-transform-runtime @babel/preset-env或对应yarn命令升级
• 升级后重新安装依赖并运行测试

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