Единичное тестирование Vue Component - Jest Setup - Ошибка неожиданного идентификатора

Я новичок в Jest, и я пытаюсь запустить простой unit тест, чтобы убедиться, что все настроено правильно, и многие проблемы устраняют ошибки во время компиляции.

При запуске набора тестов Jest успешно находит файл, который я пытаюсь проверить, и генерирует следующее сообщение об ошибке "Неожиданное идентификатор" в строке 1. Любая идея, почему это так? чего-то не хватает? Я пытаюсь устранить это довольно долгое время.

/Users/foo/Sites/test/Test.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Test from './Test.vue';
                                                                                                    ^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

Обратите внимание: удаление операторов импорта выполняется успешно. Однако вся причина, по которой я настроил Jest, - проверить компоненты vue.

Test.vue

<template>
        <div class="test">
        </div>
</template>

<script>
    export default {
        name: 'test',
        components: { },
        data() {
            return {

            }
        },
        methods: {
            helloWorld() {
                return 'hello world';
            }
        }
    }
</script>

Test.spec.js

import Test from './Test.vue'

describe('Test',() => {
   it('test', () => {
     expect(true).toBe(true);
   });
});

package.json

"devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.25",
    "axios": "^0.18.0",
    "babel-core": "^6.26.0",
    "babel-jest": "^23.6.0",
    "babel-loader": "^7.1.2",
    "cross-env": "^5.1.1",
    "file-loader": "^2.0.0",
    "jest": "^23.6.0",
    "jquery": "^3.2",
    "laravel-mix": "^2.0",
    "lodash": "^4.17.4",
    "popper.js": "^1.14.3",
    "source-map-support": "^0.5.9",
    "vue": "^2.5.7",
    "vue-jest": "^3.0.0",
    "vue-test-utils": "^1.0.0-beta.11",
    "webpack": "^3.8.1"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.js$": "babel-jest"
    }
  }

Ответ 1

В тесте вы используете функции ES6, а именно оператор импорта, поэтому вам нужно скомпилировать их в ES5 с использованием предустановки.

Создайте babel.config.js и добавьте @babel/preset-env, вот так

//babel.config.js
module.exports = {
  presets: ["@babel/preset-env"]
};

Далее в файле package.json в настройке jest сообщите jest, где находится корневой вашего тестового кода, и каталоги модуля, которые будут рекурсивно ищаться шутка, вот так,

//package.json
"roots": [
  "test"
],
"moduleDirectories": [
  "test",
  "node_modules"
],

Ответ 2

Таким образом, похоже, что Jest не поддерживает модули ES6. Вам придется использовать require вместо этого.

Test.vue

<template>
    <div class="test"></div>
</template>

<script>
module.exports = {
  name: 'test',
  components: {},
  data() {
    return {}
  },
  methods: {
    helloWorld() {
      return 'hello world'
    },
  },
}
</script>

Test.spec.js

const Vue = require('vue')
const Test = require('./Test.vue')

describe('Test', () => {
  it('test', () => {
    expect(Test.methods.helloWorld()).toBe('hello world')
  })
})

Также вам нужно будет потребовать Vue, если вы хотите создать экземпляр своего компонента в тесте.

Изменить: Пожалуйста, обратитесь к этому вопросу, если вы хотите использовать импорт/экспорт ES6 в Jest.