Vue2+Laravel Mix项目Jest测试导入design-system依赖报错求助

Jest默认配置下会跳过node_modules目录下所有文件的Babel转译流程，你项目中引入的私有依赖design-system提供的是未编译的ES Module源码（直接使用export/import ESM语法），Jest运行在CommonJS环境下无法直接解析这类语法，直接抛出Unexpected token 'export'错误。
原子层级组件未引入该未编译依赖因此可正常测试，分子/有机体层级组件引入design-system组件后触发该报错，和你遇到的现象完全匹配。

• 从错误栈定位具体报错文件：报错明确指向node_modules/design-system/src/index.js第2行的export语法，确认是未转译的ESM代码导致解析失败
• 核对Jest默认规则：Jest默认transformIgnorePatterns配置值为/node_modules/，即该目录下所有文件都不会走你定义的babel-jest转译逻辑
• 对比正常/异常场景差异：无第三方未编译依赖的原子组件运行正常，引入design-system的高层级组件报错，定位到是依赖转译规则缺失导致的问题

按推荐优先级排序：

方案1：配置Jest转译指定node_modules依赖（推荐） #

修改jest.config.js，添加transformIgnorePatterns配置，将需要转译的design-system及其依赖的ESM包（比如报错中提到的@fortawesome相关包）加入转译白名单，避免全量转译node_modules拖慢测试速度：

module.exports = {
  testEnvironment: 'jsdom',
  verbose: true,
  moduleFileExtensions: ['js', 'json', 'vue'],
  testMatch: ['**/tests/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/resources/js/$1',
  },
  // 新增该配置：除括号内列出的包外，其他node_modules文件不转译
  transformIgnorePatterns: [
    '/node_modules/(?!(design-system|@fortawesome)/)'
  ],
  transform: {
    '.*\\.(js)$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/@vue/vue2-jest',
  },
};

如果后续运行时发现其他node_modules下的包也报ESM语法错误，把对应的包名继续加到上面的正则括号里即可。

方案2：Mock第三方依赖（适合纯单元测试场景） #

如果你的单元测试只关注当前组件自身逻辑，不需要真实渲染design-system提供的组件，可以直接在测试中mock掉整个design-system模块，不需要转译依赖。
在测试用例文件开头添加mock逻辑：

import { shallowMount } from '@vue/test-utils';
import Filters from '@/components/molecules/Filters';

// 新增mock逻辑
jest.mock('design-system', () => ({
  Select: {
    name: 'ObsSelect',
    template: '<div />'
  }
}))

describe('Filters.vue', () => {
  it('is visible', () => {
    // 注意：你的组件中使用了$t、$route全局方法，挂载时需要添加对应mock避免报错
    const wrapper = shallowMount(Filters, {
      mocks: {
        $t: (key) => key,
        $route: () => ({
          params: { period: 'year' }
        })
      }
    });
    expect(wrapper.isVisible()).toBe(true);
  });
});

注意：解决转译问题后，你当前的测试用例还会因为组件内使用了vue-i18n的$t方法、路由的$route方法报错，按照上面示例给shallowMount添加mocks配置即可解决。

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