Laravel-mix: "TypeError: Super expression must either be null or a function" when importing Vue components on mocha tests

[Colbydude]

• Laravel Mix Version: 2.1.14
• Node Version: 8.11.3
• NPM Version: 5.6.0
• OS: macOS High Sierra 10.13.6

Description:

Attempting to import a Vue component into a test when using mocha-webpack causes a compile error like the following:

 WEBPACK  Failed to compile with 1 error(s)

Error in ./resources/assets/js/components/ExampleComponent.vue

   TypeError: Super expression must either be null or a function
      at /Users/colbyterry/Sites/laravel56/node_modules/prettier/index.js:32893:5
      at /Users/colbyterry/Sites/laravel56/node_modules/prettier/index.js:32913:4

Steps To Reproduce:

I'm following the steps in https://laracasts.com/series/testing-vue/episodes/6, except I'm pulling in the latest versions of the packages.

tl;dw of the video:

1. Fresh Laravel 5.6 app (laravel-mix ^2.0 in package.json).
2. Run yarn add @vue/test-utils expect jsdom jsdom-global mocha mocha-webpack --dev
3. Create tests/JavaScript/setup.js and add:

require('jsdom-global')();

1. Create ExampleComponent.spec.js and add:

import { mount } from '@vue/test-utils';
import expect from 'expect';
import ExampleComponent from './../../resources/assets/js/components/ExampleComponent.vue';

describe('Example', () => {
    it('says that it is an example component', () => {
        let wrapper = mount(ExampleComponent);

        expect(wrapper.html()).toContain('Example Component');
    });
});

1. Add the test script to package.json:

"test": "mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/JavaScript/setup.js  tests/JavaScript/**/*.spec.js"

1. Run yarn test

Notes:

I've backtracked the error to start happening with Laravel Mix 1.4.4 (1.4.3 works). I'm _guessing_ it has something to do with bd77f7c. I've double-checked against the versions of the packages in the video's package.json and the error still persists if you're using a version of Laravel Mix greater than 1.4.3.

[NickCorl]

Unfortunately, I am still having the same issue, even after setting laravel-mix to 1.4.3. Does anyone still have issues even after the laravel-mix fix?

[AlexandreMPDias]

Got the same error... If I come up with something I will let you know

[FRFlor]

Yeah, this error is preventing me from running vue tests on new projects.

Thankfully, downgrading to laravel-mix 1.4.3 seems to do the trick for now.

[asethwright]

From what I can find, this is a pretty complicated conflict caused by jsdom-global and rollup and is unrelated to laravel-mix.

Here is a temporary workaround for successful testing:

// setup.js
require('jsdom-global')();
global.expect = require('expect');
window.Date = Date; // temporary bug fix, should be removed after vue-test-utils fixes #936

Hope this helps someone else!

More info:
https://github.com/vuejs/vue-test-utils/issues/936
https://github.com/vuejs/vue-cli/issues/2128
https://github.com/vuejs/vue-cli/issues/2300

[Nolaan]

@asethwright Thanks for the fix! I've been searching this since last Friday! I don't know how you guys keep up with this Javascript nightmare, this is hell nothing works but kudos to you.
Thanks very much again!

[Colbydude]

Thanks for the update, Seth. Glad to hear it's not an issue specific to Laravel Mix. I'll leave this open until vue-test-utils closes the issue referenced, or until Jeff, or someone of authority over the repo, closes it. Wanna make sure people who are following along with the video series and happen to run into the same problem have something to reference.

[tyler36]

If you use yarn, a solution that worked for me was to add the following to packages.json

    "resolutions": {
        "prettier": "1.14.0"
    }

Then, you need to run yarn install

[herivgs]

From what I can find, this is a pretty complicated conflict caused by jsdom-global and rollup and is unrelated to laravel-mix.

Here is a temporary workaround for successful testing:

// setup.js
require('jsdom-global')();
global.expect = require('expect');
window.Date = Date; // temporary bug fix, should be removed after vue-test-utils fixes #936

Hope this helps someone else!

More info:
vuejs/vue-test-utils#936
vuejs/vue-cli#2128
vuejs/vue-cli#2300

Woow! thanks for the workaround!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[njoguamos]

Experiencing the same error

• Laravel Mix Version: 4.0.14
• Node Version: 11.3.0
• NPM Version: 6.7.0
• Mocha: 5.2.0,
• Mocha-webpack: 1.1.0

[therealSMAT]

Had the same issue. @asethwright 's workaround works for me.