ElementUI tests throw ReferenceError: _Message is not defined

Question

我正在使用 ElementUI 组件的按需加载。我已正确按照说明进行操作，当运行应用程序

时它工作正常

当我尝试使用 Jest 和 Vue 测试工具进行测试时出现问题。 None 我正在导入的组件似乎已找到，所以当运行我的测试时出现此错误：

ReferenceError: _Message is not defined

对于我的测试涉及的任何其他组件，我都遇到了相同的错误。

在我上面提到的错误报告中，我被提示我的 babel 配置没有在我的测试环境中应用？或者它与我的 Jest 配置有关。我尝试了各种方法来解决这个问题：

进行手动模拟
监视组件
在我的测试中导入整个 ElementUI 包
正在更新 Jest 配置

似乎没有任何效果，我不知道哪里出了问题...

bebel.config.js

module.exports = {
  presets: [
    '@vue/app',
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk',
      },
    ],
  ],
};

jest.config.js

module.exports = {
  // roots: ['<rootDir>/src/', '<rootDir>/tests/'],
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue',
  ],
  transform: {
    '^.+\.vue$': 'vue-jest',
    '.+\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\.jsx?$': 'babel-jest',
  },
  transformIgnorePatterns: [
    '/node_modules/(?!element-ui)',
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/',
    '^.+\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
  },
  snapshotSerializers: [
    'jest-serializer-vue',
  ],
  testMatch: [
    '**/tests/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
  ],
  testURL: 'http://localhost/',
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname',
  ],
  collectCoverage: true,
  coverageReporters: ['lcov', 'text-summary'],
};

Answer 1

这里我有几个建议给你：

在 jest.config.js

中更改此设置

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue',
  ],
  transform: {
    '^.+\.vue$': 'vue-jest',
    '.+\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\.(js|jsx)?$': 'babel-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/',
    '^.+\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
  },
  snapshotSerializers: [
    'jest-serializer-vue',
  ],
  testMatch: [
    '**/tests/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
  ],
  testURL: 'http://localhost/',
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname',
  ],
  collectCoverage: true,
  coverageReporters: ['lcov', 'text-summary'],
};

这在 babel.config.js

module.exports = {
  presets: [
    '@vue/app',
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk',
      },
    ],
  ],
  "env": { "test": { "plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node"] } }
};

我也相信纱线需要 @babel/plugin-transform-modules-commonjs。让我知道这是否有效。

ElementUI tests throw ReferenceError: _Message is not defined

ElementUI tests throw ReferenceError: _Message is not defined

vue.js

jestjs

vue-test-utils

element-ui

bebel.config.js

jest.config.js