Bootstrap-vue: SyntaxError: Unexpected token import

[ebertti]

Hi,

I'm getting this error when I try to make some jest test with all my componets that import some boostrap-vue component. I tried to find some related issue, but I didn't find anything that work for me.

This is not occoruing with another libraries that I import on my others tests.

My project was made by vue-cli and default webpack template

error:

\node_modules\bootstrap-vue\es\components\alert\alert.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){
import bButtonClose from '../button/button-close';
^^^^^^

    SyntaxError: Unexpected token import

jest spec test

import { shallow } from 'vue-test-utils';
import Tested from '@/Tested';

describe('Tested.vue', () => {
  it('Some TestCase', async () => {
    const wrapper = shallow(Tested);
    // some expected assertions
  });
});

@/Tested.vue

<template>
  <div>
    <bAlert></bAlert>
  </div>
</template>

<script>
import bAlert from 'bootstrap-vue/es/components/alert/alert';
export default {
  name: 'Tested',
  props: ['text'],
  components: [bAlert],
};
</script>

.babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

jest.conf.js

const path = require('path');

module.exports = {
  rootDir: path.resolve(__dirname, '../../'),
  moduleFileExtensions: [
    'js',
    'json',
    'vue',
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
  },
  testPathIgnorePatterns: [
    '<rootDir>/test/e2e',
  ],
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
  setupFiles: ['<rootDir>/test/unit/setup'],
  mapCoverage: true,
  coverageDirectory: '<rootDir>/test/unit/coverage',
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js',
    '!src/router/index.js',
    '!**/node_modules/**',
  ],
};

[mosinve]

https://jestjs.io/docs/en/configuration.html#transformignorepatterns-array-string
https://jestjs.io/docs/en/tutorial-react-native.html#transformignorepatterns-customization
The point is to setup jest to transform Bootstrap-Vue es modules

[ebertti]

Thanks @mosinve, based on your clue, I made this fix on my jest.conf.js. Now I get a new error because bAlert import some css, but already fix it.

const path = require('path');
module.exports = {
  rootDir: path.resolve(__dirname, '../../'),
  moduleFileExtensions: [
    'js',
    'json',
    'vue',
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '\\.(css|less|sass|scss)$': '<rootDir>/test/mock/styleMock.js',   //<-- add this line to fix css import problem
  },
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
  },
  transformIgnorePatterns: [
    'node_modules/(?!(bootstrap-vue)/)', // <-- add this line to fix SyntaxError: Unexpected token import
  ],
  testPathIgnorePatterns: [
    '<rootDir>/test/e2e',
  ],
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
  setupFiles: ['<rootDir>/test/unit/setup'],
  mapCoverage: true,
  coverageDirectory: '<rootDir>/test/unit/coverage',
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js',
    '!src/router/index.js',
    '!**/node_modules/**',
  ],
};

and create this file:

/test/mock/styleMock.js

module.exports = {}

Everything is working! Thank you! 🚀

[rzane]

I also ran into this problem. In my case, I followed these instructions: https://github.com/vuejs/vue-cli/issues/1584#issuecomment-439718686.

I needed to add the following line to the transform section of my Jest config:

transform: {
    "^.+\\.js$": "babel-jest",
   ...
}

In addition to:

transformIgnorePatterns: ["<rootDir>/node_modules/(?!bootstrap-vue)"]