元素 UI 测试抛出 ReferenceError: 消息未定义

Posted

技术标签:

【中文标题】元素 UI 测试抛出 ReferenceError: 消息未定义【英文标题】:ElementUI tests throw ReferenceError: _Message is not defined 【发布时间】:2019-12-29 13:19:53 【问题描述】:

Bug report on ElementUI

我正在使用 ElementUI 组件的按需加载。我已正确按照说明进行操作,并且在运行应用程序时运行良好。

当我尝试使用 Jest 和 Vue 测试工具进行测试时,问题就出现了。似乎没有找到我要导入的组件,因此在运行测试时出现此错误:

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/$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'],
;

【问题讨论】:

【参考方案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。 让我知道这是否有效。

【讨论】:

以上是关于元素 UI 测试抛出 ReferenceError: 消息未定义的主要内容,如果未能解决你的问题,请参考以下文章

ReferenceError:元素未定义。当我尝试运行 ios 测试时遇到此问题,以 jest 作为测试运行器反应本机

为啥 typeof 有时只抛出 ReferenceError?

如果在声明变量之前使用了变量,为啥不会抛出 ReferenceError?

为啥这段代码会抛出 ReferenceError: test is not defined?

我们如何在 JavaScript 中抛出和捕获 RangeError、ReferenceError、TypeError?

测试方法抛出异常:找不到标题为计算器的窗口