Как исправить ошибку SyntaxError: Unexpected token { в модульных тестах?

Question

[Руслан Абсалямов]

Как исправить ошибку когда запускаешь модульное тестирование. Весь код теста простой

import { mount } from '@vue/test-utils'
import dropdown from '../../src/components/forms/dropdown.vue'

describe('dropdown', () => {
    const wrapper = mount(dropdown);

    console.log(wrapper);
});

Но у меня выходит данная ошибка

FAIL  __tests__/Component.dropdown.js
  ● Test suite failed to run

    /home/ruslan/Разработка/implant/src/components/forms/dropdown.vue:21
    import { mixin as clickaway } from 'vue-clickaway'
           ^
    
    SyntaxError: Unexpected token {
      
      at new Script (vm.js:85:7)
      at Object.<anonymous> (__tests__/Component.dropdown.js:2:17)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        1.13s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

Как мне импорты внутри vue исправлять из однофайловых компонентов?

Answer 1

[Alex]

Судя по всему проблема в том, что та либа, которая анализирует вам код для теста не понимает ES6 imports. Я бы написал по этому вопросу разработчику либы

Comments

[Руслан Абсалямов]

Ну мне кажется что babel проблема. Потому что убирая либу, я оставил код и у меня посыпалась следующая ошибка

/home/ruslan/Разработка/implant/src/components/forms/dropdown.vue:22
    export default {
    ^^^^^^

Answer 2

[FullStack Alex]

У меня это ошибка возникла в связи с TweenLite от GSAP. Проблема в том, что тесты производятся в Node.js environment и Node.js не поддерживает ES6 Modules и export. Поэтому весь используемый код должен быть по стандарту ES5.

Решение проблемы:
- писать/использовать код по ES5
- или же если вы используете Babel, тогда нужно в Webpack конфигурации указать какие папки нужно должен обрабатывать:

webpack.test.js

const merge = require('webpack-merge');
const dev = require('./webpack.dev.js');
const path = require('path');

module.exports =
    merge(dev, {

        module: {
            rules: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    //или же вместо exclude наоборот указать какие папки использовать:
                    include: [
                         path.resolve(__dirname, 'src'),
                         path.resolve(__dirname, 'test'),
                         path.resolve(__dirname, 'node_modules/gsap')
                    ],
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [
                            '@babel/plugin-transform-runtime',
                            '@babel/plugin-proposal-object-rest-spread',
                            '@babel/plugin-syntax-dynamic-import',
                            'transform-es2015-arrow-functions'
                        ]
                    }
                },
            ]
        },
    });