ElementUI测试抛出ReferenceError:未定义_Message

Question

关于ElementUI的错误报告

我正在使用按需加载的ElementUI组件.我已经正确地遵循了说明，在运行这个应用程序时，它运行得很好。

当我尝试用Jest和Vue测试工具进行测试时，问题就出现了。我导入的组件似乎都找不到，所以在运行测试时会遇到以下错误：

ReferenceError: _Message is not defined

对于任何其他组件，我都会得到与我的测试相同的错误。

在我上面提到的bug报告中，有人建议我的babel配置没有应用到我的测试环境中？或者是关于我的Jest配置。我尝试过各种方法来解决这个问题：

1. 做一个人工模拟
2. 监视部件
3. 在我的测试中导入整个ElementUI包
4. 更新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/$1',
    '^.+\\.(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/$1',
    '^.+\\.(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。如果这有用的话请告诉我。