How to fix SyntaxError: Unexpected token { error in unit tests?

Question

Vue.js

How to fix an error when you run unit testing. All test code is simple

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

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

    console.log(wrapper);
});

But I get this error

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.

How do I fix imports inside vue from single file components?

Answer 1

Apparently, the problem is that the one that analyzes your code for the test does not understand ES6 imports. I would write to the developer about this

Answer 2

I got this error in connection with TweenLite from GSAP. The problem is that the tests are produced in the Node.js environment and Node.js does not support ES6 Modules and exports. Therefore, all code used must be according to the ES5 standard.
Solution to the problem:
- write / use code according to ES5
- or if you use Babel, then you need to specify in the Webpack configuration which folders you need to process:
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'
                        ]
                    }
                },
            ]
        },
    });