mercredi 16 septembre 2020

Jest encountered an unexpected token during tests

When trying to run jest tests for a simple vue.js-view I get an error about "Jest encounter[ing] an unexpected token". It seems like babel is not correctly transpiling the ScaleLoader, although it should?!

Without the ScaleLoader the tests run successfully. I am using vue-spinner in version 1.0.4.

=> How can I run these tests successfully without errors?

// inventory_taking.spec.js
import InventoryTaking from "../InventoryTaking.vue";
import {shallowMount} from "@vue/test-utils";

describe("InventoryTaking", () => {
    const wrapper = shallowMount(InventoryTaking);

    it("renders correctly", () => {
        expect(wrapper).toBeTruthy();
    });
});
// InventoryTaking.vue
<template>
</template>

<script>
import ScaleLoader from "vue-spinner/src/ScaleLoader";

export default {
  name: "InventoryTaking",
  components: {
    ScaleLoader,
  },
};
</script>
// Error message
    ● Test suite failed to run
    
      Jest encountered an unexpected token
    
      This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
    
      By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
    
      Here's what you can do:
       • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
       • If you need a custom transformation specify a "transform" option in your config.
       • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
    
      You'll find more details and examples of these config options in the docs:
      https://jestjs.io/docs/en/configuration.html
    
      Details:
    
      .../node_modules/vue-spinner/src/ScaleLoader.vue:1
      ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
                                                                                               ^
    
      SyntaxError: Unexpected token <
    
        3 | 
        4 | <script>
      > 5 | import ScaleLoader from "vue-spinner/src/ScaleLoader";
          | ^
        6 | 
        7 | export default {
        8 |   name: "InventoryTaking",
    
        at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
        at src/views/InventoryTaking.vue:5:1
        at Object.<anonymous> (src/views/InventoryTaking.vue:29:3)
//jest.config.js
module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.jsx?$': 'babel-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  setupFiles: [
    "<rootDir>/src/utils/browser_mocks.js"
  ]
}

Aucun commentaire:

Enregistrer un commentaire