Proxyrequireify gives errors

[matt-sanders]

When trying to mock a dependency as per this example which is referenced in the test I get an error:

{ [SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1:0)] pos: 0, loc: Position { line: 1, column: 0 }, raisedAt: 6 }
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
    at Parser.pp.raise (/home/mattsanders/Downloads/NewVue/node_modules/proxyquireify/node_modules/detective/node_modules/acorn/dist/acorn.js:1745:13)
    at Parser.pp.parseStatement (/home/mattsanders/Downloads/NewVue/node_modules/proxyquireify/node_modules/detective/node_modules/acorn/dist/acorn.js:2450:34)
    at Parser.pp.parseTopLevel (/home/mattsanders/Downloads/NewVue/node_modules/proxyquireify/node_modules/detective/node_modules/acorn/dist/acorn.js:2379:21)
    at parse (/home/mattsanders/Downloads/NewVue/node_modules/proxyquireify/node_modules/detective/node_modules/acorn/dist/acorn.js:101:12)
    at parse (/home/mattsanders/Downloads/NewVue/node_modules/proxyquireify/node_modules/detective/index.js:9:12)
    at walk (/home/mattsanders/Downloads/NewVue/node_modules/proxyquireify/node_modules/detective/index.js:43:15)
    at Function.exports.find (/home/mattsanders/Downloads/NewVue/node_modules/proxyquireify/node_modules/detective/index.js:72:5)
    at findProxyquireVars (/home/mattsanders/Downloads/NewVue/node_modules/proxyquireify/lib/find-dependencies.js:31:6)
    at module.exports (/home/mattsanders/Downloads/NewVue/node_modules/proxyquireify/lib/find-dependencies.js:47:14)
    at requireDependencies (/home/mattsanders/Downloads/NewVue/node_modules/proxyquireify/lib/transform.js:9:14)
    at Stream.end (/home/mattsanders/Downloads/NewVue/node_modules/proxyquireify/lib/transform.js:24:16)
    at _end (/home/mattsanders/Downloads/NewVue/node_modules/proxyquireify/node_modules/through/index.js:61:9)
    at Stream.stream.end (/home/mattsanders/Downloads/NewVue/node_modules/proxyquireify/node_modules/through/index.js:70:5)
    at DestroyableTransform.onend (/home/mattsanders/Downloads/NewVue/node_modules/browserify/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:495:10)
    at DestroyableTransform.g (events.js:260:16)
    at emitNone (events.js:72:20)

The other test works fine, but as soon as I add this in it gives an error. Not sure if this is an issue with Proxyquireify or with the setup in this example. Any help would be much appreciated!

[chrisvfritz]

Could you please share the exact code causing this error?

[matt-sanders]

Sure thing. Just as a side note I've slightly reworked this example to work with this example as the latter references the first...

//test/unit/a.spec.js

import Vue from 'vue'
import ComponentA from '../../src/components/a.vue'


describe('a.vue', () => {

    it('should render with mocked message', function () {
        // https://github.com/thlorenz/proxyquireify
        const proxyquire = require('proxyquireify')(require)
        // create an instance of the component module,
        // injecting a mocked "../services/message" dependency
        const ComponentAWithMock = proxyquire('../../src/components/a.vue', {
            '../services/message': {
                getMessage () {
                    return 'Hello from mock'
                }
            }
        })
        // now we can test it!
        const vm = new Vue({
            el: document.createElement('div'),
            render: (h) => h(ComponentAWithMock)
        })
        expect(vm.$el.querySelector('h2').textContent).toBe('Hello from mock')
    })
})


// also see example testing a component with mocks at
// https://github.com/vuejs/vueify-example/blob/master/test/unit/a.spec.js#L22-L43

// src/components/a.vue
<style scoped>
 h2 {
     color: #f66;
 }
</style>

<template>
  <div class="component">
    <h2>{{msg}}</h2>
  </div>
</template>

<script>
 import { getMessage } from '../services/message'
 export default {
     data () {
         return {
             msg: getMessage()
         }
     }
 }
</script>

You can get the karma.conf.js file and the package.json file from here

Then I run npm test and get the above error. Thanks for your help, let me know if you need any extra info.

[chrisvfritz]

Hmm... not sure exactly what's causing the problem. Just added the help wanted tag.

[matt-sanders]

Thanks Chris, it's a bit of a sticky one.

[lamyaakhamlichi]

I'm having the same issue. @matt-sanders did you ever find a solution for this issue?

[matt-sanders]

No sorry, I never managed to fix it. I did however switch over to webpack just for the unit testing side of things. You can view my current build here which has a working example of this.

[lamyaakhamlichi]

That's great, thanks @matt-sanders

[dmiranda2791]

I'm having the same issue. I have tried adding babelify transform in karma conf section for browserify but I keep getting this error.