Jest Vue3 @Vueform/слайдер "Ошибка синтаксиса: Невозможно использовать оператор импорта вне модуля"

#vue.js #jestjs #vuejs3 #babel-jest

Вопрос:

Я использую Jest в качестве тестового запуска в проекте Vue 3, в котором используется плагин @vueform slider:

код в @vueform/slider/dist/slider.js:1 выдает ошибку «Синтаксическая ошибка: невозможно использовать оператор импорта вне модуля».

Я попытался добавить запись «transformIgnorePatterns» в конфигурацию шутки package.json:

 "jest": {
  "testEnvironment": "jsdom",
  "moduleFileExtensions": [
    "js",
    "json",
    "vue"
  ],
  "transform": {
    "^. \.(js|jsx)$": "babel-jest",
    "^. \.(vue)$": "vue3-jest"
  },
  "transformIgnorePatterns": ["/node_modules/(?!@vueform/slider/)", "node_modules/(?!@vueform/)"]
}

Я также добавил «тип»: «модуль» в package.json

И попытался измениться

 import SliderPrice from "@vueform/slider"

Для

 const SliderPrice = require("@vueform/slider")

Все еще получаю ту же ошибку!

Есть идеи, как я могу решить эту проблему? Я не могу ничего проверить с помощью Jest, пока эта ошибка не будет устранена.

Редактировать:

Я забыл добавить это: Изначально сведения об ошибке включали все (сведенные к минимуму) slider.js файл. После добавления «тип»: «модуль» в package.json теперь подробности включают только эту строку:

 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { toRefs as t, ref as e, computed as r, reactive as n, onMounted as i, onUnmounted as o, watch as a, openBlock as s, createBlock as l, mergeProps as u } from "vue";

Правка 2:

Моя конфигурация babel находится в файле .babelrc:

 {
  "presets": ["@babel/preset-env"]
}

Vue-это настройка внешнего интерфейса в приложении Laravel, но webpack.mix.js файл конфигурации не использует babel.

Правка 3:

После еще нескольких часов игры с настройками я считаю, что это связано с Babel: если я удалю свой файл .babelrc, я начну получать ошибку «Ошибка синтаксиса: Невозможно использовать инструкцию импорта вне модуля» для моих собственных файлов .vue. Это показывает, что с помощью файла .babelrc мои файлы javascript ES6 преобразуются в ES5.

Таким образом, плагины Vue, такие как @vueform/slider/, НЕ преобразуются Babel в ES5, хотя правильный путь определен в «transformIgnorePatterns».

1. Возможно, это не решение, но я думаю, что это то, что стоит попробовать. Ваше использование transformIgnorePatterns кажется опасным. Прочитайте эту часть Jest docs : transformIgnorePatterns исключит файл из преобразования, если путь совпадает с любым предоставленным шаблоном. Поэтому разделение на несколько шаблонов может привести к непредвиденным результатам, если вы не будете осторожны.

2. Я знаю, что комментарии не должны использоваться для этого, но вы нашли решение? В настоящее время у меня та же проблема

3. @Николь, я оставил его на несколько дней, а затем вернулся свежим, чтобы попробовать еще раз. Я считаю, что я определил корень проблемы, хотя я еще не нашел решения. Я обновлю эту тему к завтрашнему дню, надеюсь, найду решение. Не волнуйтесь, очень скоро все так или иначе уладится 🙂

Ответ №1:

Для vue3 и 2 (я не тестировал его на 2, но должен работать)

 npm i -D @babel/preset-env babel-jest

babel.config.js

 {
  "presets": ["@babel/preset-env"]
}

У меня также были проблемы с файлами vue. Ниже моя конфигурация работает нормально.

 npm i -D @vue/vue3-jest # or 2 if you are on second version

jest.config.js

 export default {
  testEnvironment: 'jsdom',
  transform: {
    '^. \.[t|j]sx?

: 'babel-jest', '^. \.vue


: '@vue/vue3-jest',

  },

}