Vue-test-utils |Jest: Как справиться с зависимостями? - PullRequest
Новая
       54

Vue-test-utils |Jest: Как справиться с зависимостями?

0 голосов
/ 12 октября 2018

СИТУАЦИЯ:

Я выполняю юнит-тестирование в своем приложении Vue, используя vue-test-utils с конфигурацией Jest.

Когда я тестирую простойс компонентами все нормально.Но когда я тестирую компоненты, которые импортируют другие зависимости, тест завершается неудачей.

КОНФИГУРАЦИЯ:

Vue версия: 2.5.17
@ vue / test-utils: 1.0.0-beta.20
cli-plugin-unit-jest: 3.0.3
babel-jest: 23.0.1

СООБЩЕНИЕ ОБ ОШИБКЕ:

Точное сообщение об ошибке зависит от того, какую зависимость я импортирую.

Например, с epic-spinners ошибка: 

SyntaxError: Unexpected token import

enter image description here

При vue-radial-progress ошибка: 

SyntaxError: Unexpected token <

enter image description here

КАК ВОСПРОИЗВОДИТЬ:

  • Сделать новую установку vue (с Jest в качестве пакета модульного тестирования)
  • Запустить тестовый пример, он должен пройти
  • Установите зависимость (например: npm install --save epic-spinners)
  • Импортируйте зависимость внутри компонента HelloWorld
  • Запустите тест снова (без изменений)

ЕслиЯ делаю эти шаги, тест не проходит с вышеуказанным эror message.

ВОПРОС:

Как мне обработать импорт зависимостей в vue-test-utils / Jest?

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

В дополнение к решению @ FrancescoMussi, если оно все еще не работает для вас, убедитесь, что ваша конфигурация Babel находится в правильном месте согласно Jest docs

Я переместил свойНастройка Babel на package.json, которую Babel не обнаружил из-за Vue CLI, устанавливающей Babel 7. Перемещение конфигурации Babel обратно на babel.config.js решило проблему для меня.

0 голосов
/ 16 октября 2018

Проблема заключалась в том, что некоторые модули могут быть скомпилированы неправильно.

Решение заключается в использовании свойства transformIgnorePatterns настроек Jest.То есть из документов:

Массив строк шаблонов регулярных выражений, которые сопоставляются всем путям исходного файла перед преобразованием.Если тестовый путь соответствует какому-либо из шаблонов, он не будет преобразован.

В моем случае я решил эту проблему следующим образом: 

transformIgnorePatterns: [
  "node_modules/(?!epic-spinners|vue-radial-progress)"
],

РЕДАКТИРОВАТЬ:

Это мой jest.config.js 

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest',
  },
  transformIgnorePatterns: [
    "node_modules/(?!epic-spinners|vue-radial-progress)"
    // "node_modules/(?!epic-spinners)",
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/'
}
...