Testing with Jest: SyntaxError: Unexpected identifier

[bissolli]

Hi guys,

I am trying to test a component which uses VueAgile locally register and I am getting the following error:

/Users/gustavobissolli/Code/chatfood-webview/node_modules/vue-agile/src/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import VueAgile from './Agile'
                                                                                                    ^^^^^^^^

    SyntaxError: Unexpected identifier

      22 | <script>
      23 | import LoyaltyProgram from "./LoyaltyProgram";
    > 24 | import { VueAgile } from "vue-agile";
         | ^
      25 | import { isEmpty, isNil } from "ramda";
      26 | 
      27 | export default {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at src/components/menu/carousel/Index.vue:24:1
      at Object.<anonymous> (src/components/menu/carousel/Index.vue:73:3)

This is my component:

<template>
  <div class="container-fluid p-0" v-if="isComponentVisible">
    <Carousel
      :autoplay="true"
      :autoplaySpeed="5000"
      :speed="500"
      :navButtons="false"
      :unagile="activeCarousel"
    >
      <LoyaltyProgram
        v-if="hasLoyaltyProgram"
        :rewardPoints="rewardPoints"
        :loyaltyProgram="loyaltyProgram"
      />
      <div class="px-3" v-if="note">
        <div class="alert alert-success mb-0 px-3" v-html="note" />
      </div>
    </Carousel>
  </div>
</template>

<script>
import LoyaltyProgram from "./LoyaltyProgram";
import { VueAgile } from "vue-agile";
import { isEmpty, isNil } from "ramda";

export default {
  components: {
    Carousel: VueAgile,
    LoyaltyProgram
  },
  props: {
    note: {
      type: String,
      default: () => null
    },
    rewardPoints: {
      type: Number,
      default: () => 0
    },
    loyaltyProgram: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    hasLoyaltyProgram() {
      return !isEmpty(this.loyaltyProgram);
    },
    isComponentVisible() {
      return this.hasLoyaltyProgram || !isNil(this.note);
    },
    activeCarousel() {
      return !this.note || !this.hasLoyaltyProgram;
    }
  }
};
</script>

Any idea on how to fix it?

[lukaszflorczak]

Hey! Thank you for the issue. I'll try to fix it until the end of the week.

[lukaszflorczak]

@bissolli I check this and it looks like a problem in your config. This issue looks very similar: https://github.com/facebook/react/issues/14399

[rudolph2907]

@lukaszflorczak I've run into the same error as well. I am not sure how the fix above will fix it.

[JakeBeresford]

I'm also running into this issue. If anyone has Jest working for a component using Vue-agile please share your configuration.

Here is my jest.config.js

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  transformIgnorePatterns: [
    '/node_modules/'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/',
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname'
  ]
}

And my babel config:

module.exports = {
	presets: ['@babel/env'],
	overrides: [
		{
			test: './src',
			presets: ['@vue/app']
		},
		{
			test: './styleguide',
			presets: ['@babel/react']
		}
	]
}

I'm using the in component approach, similar to bissolli and have tried the global approach where I had a similar issue.

I suspect some configuration change might be the solution here, but I'm not sure what exactly needs to be configured or why?

[JakeBeresford]

I have found a solution to this problem. In your jest configuration you need to exclude vue-agile from the transformIgnorePatterns like this

transformIgnorePatterns: [ '/node_modules/(?!vue-agile)' ],

[amitkumar]

For anyone using nuxt, I had the same error. Adding vue-agile to the transpile options in nuxt.config.js fixed it:

build: {
    transpile: [
      'vue-agile'
    ],
}

Thanks @JakeBeresford for clueing me in on the fix!

[davestewart]

@amitkumar you lifesaver!

This was driving me nuts and I thought I was going to have to remove this really nice lib from the project.

@lukaszflorczak - any way you can solve this in core?

[lukaszflorczak]

@davestewart I would like, but I'm not sure where the problem is.

[markhughes]

I also had this issue while using vue-agile w/ Nuxt. However, adding to transpile as @amitkumar stated resolved the issue! Cheers!