Double export brakes jest test

[Ivan3008]

Description

Hello! i faced a strange issue while testing my application. i've got wrapping component named as 'ContextMenu' which contains imported 'vue-context' and renders menu items in a loop. Everything works fine, but jest test fails because vue-context module is exported twice. Here is the error:

\node_modules\vue-context\src\js\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { default } from './vue-context';
SyntaxError: Unexpected token 'export'

Full description of the error - http://prntscr.com/tcirgu

As i understand the problem is in the module here

export { default } from './vue-context'; 
export { default as VueContext } from './vue-context';

If needed, the full code of the component:

<template>
  <vue-context
    ref="menu"
    @close="clear"
    class="c-context-menu position-fixed bg-white shadow-light rounded-sm border-0"
  >
    <div
      v-for="(m, index) in filteredData"
      :key="index"
      @click.prevent="m.handler(item.id)"
      class="c-context-menu__item position-relative pl-4 pr-4 pt-3 pb-3 cursor-pointer"
    >
      <i :class="`c-context-menu__item-icon mr-2 ${m.icon}`" />
      {{ m.title }}
    </div>
  </vue-context>
</template>

<script>
import VueContext from 'vue-context'

export default {
  name: 'ContextMenu',

  components: { VueContext },

  data() {
    return {
      item: {},
      data: []
    }
  },

  mounted() {
    this.$bus.$on('contextMenuOpen', this.open)
  },

  computed: {
    filteredData() {
      if (Object.prototype.hasOwnProperty.call(this.item, 'deleted_at')) {
        if (this.item.deleted_at === null) {
          return this.data.filter(m => m.title !== 'Восстановить')
        }

        return this.data.filter(m => m.title !== 'В архив')
      }

      return this.data
    }
  },

  methods: {
    open(event, item, data) {
      console.log(event, item, data)
      this.data = data
      this.item = { ...item }
      this.$refs.menu.open(event)
    },

    close() {
      this.$refs.menu.close()
      this.clear()
    },

    clear() {
      this.item = {}
      this.data = []
    }
  },

  beforeDestroy() {
    this.$bus.$off('contextMenuOpen')
  }
}
</script>

And the minimal jest test code to reproduce the issue:

import {
  mount,
  createLocalVue,
  enableAutoDestroy
} from '@vue/test-utils'

import ContextMenu from '@/components/ContextMenu' // wrapping component for 'vue-context'

let wrapper
let testHandler

let spyOnMenuOpen
let spyOnMenuClear

const localVue = createLocalVue()

describe('ContextMenu', () => {
  enableAutoDestroy(afterEach)

  beforeEach(() => {
    wrapper = mount(ContextMenu, {
      mocks: {
        $bus: {
          $on: jest.fn(),
          $off: jest.fn(),
          $emit: jest.fn()
        }
      },
      localVue
    })

    testHandler = jest.fn()

    spyOnMenuOpen = jest.spyOn(wrapper.vm.$refs.menu, 'open')
    spyOnMenuClear = jest.spyOn(wrapper.vm, 'clear')

    wrapper.vm.open({}, { id: 1, name: 'test' }, [
      {
        icon: 'el-icon-edit',
        title: 'test1',
        handler: testHandler
      },
      {
        icon: 'el-icon-s-cooperation',
        title: 'test2',
        handler: testHandler 
      }
    ])
  })

  it('Render menu items', (done) => {
    wrapper.vm.$nextTick(() => {
      expect(wrapper.find('.c-context-menu__item').length).toBe(2)
    })
  })
})

Steps to Reproduce

1. Create simpe jest test
2. Run test
3. Before test start, you can see the error

Version

5.2.0

[nicolidin]

I have the same problem! Did you find a workaround?

[Ivan3008]

I have the same problem! Did you find a workaround?

@nicolidin , Unfortunately no. I have no idea how to solve that Waiting for answer from developer

[Tchoupinax]

Hello,

I have the same problem (Unexpected token 'export') using Nuxt.js

// My import
import { VueContext } from 'vue-context';

[rawilk]

Unfortunately I'm not really sure how to solve that. I normally don't test my JavaScript components and I don't use Nuxt.js, so I'm not familiar with either of them.

If anyone out there has any ideas, a PR would be greatly appreciated!

[Ivan3008]

I've no idea but leaving only that line in the index file

export { default as VueContext } from './vue-context'

[rawilk]

Try updating to version 6.0.0. I removed the named export in this version, so maybe that'll help solve this.

[Ivan3008]

thank you! but the problem persists... export { default } from './vue-context' still cause the error i posted above.

[rawilk]

You could try importing it directly from the source in your test to see if that helps. I know it's not really ideal, but it may help:

import VueContext from 'vue-context/src/js/vue-context';

[rommyarb]

My brothers & sisters, I have found the solution for Nuxt.js

1. Create a plugin file in plugins/vue-context.js

import Vue from "vue";
import VueContext from "vue-context";
import "vue-context/dist/css/vue-context.css";

Vue.component("VueContext", VueContext);

2. Edit nuxt.config.js, add above file as a plugin with mode 'client'

plugins: [
    { src: "~/plugins/vue-context.js", mode: "client" }
]

Now you can use <vue-context></vue-context> component on any page.