元素 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?