Тесты ElementUI выдают ReferenceError: _Message не определен

Отчет об ошибке в ElementUI

Я использую загрузку компонентов ElementUI по требованию. Я правильно следовал инструкциям, и приложение работает нормально.

Проблема возникает, когда я пытаюсь протестировать с помощью тестовых утилит Jest и Vue. Ни один из компонентов, которые я импортирую, не найден, поэтому я получаю эту ошибку при запуске тестов:

ReferenceError: _Message is not defined

Я получаю ту же ошибку для любого другого компонента, который касается моего теста.

В отчете об ошибке, о котором я упоминал выше, мне предлагают, чтобы моя конфигурация 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'],
};

jestjs vue.js vue-test-utils element-ui
person Maxim Fedotov    schedule 24.08.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

У меня есть пара предложений для вас здесь:

измените это в 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 необходим в пряже. Дайте мне знать, если это работает.

person Berto    schedule 02.09.2019