Testing Vue Components for Exceptions

[dnorthcoombes]

Dan first of all apologies if this is not the correct place for this (first time, long time). I had an issue with running the snapshot test. Below shows the issue and how it was resolved.

Issue

When running npm test for the suite below:

import { mount } from '@vue/test-utils';
import Chat  from './Chat.vue';

describe("the Chat Service", () => {

    let wrapper = null;

    beforeEach(async() => {
        wrapper = mount(Chat, {
            propsData: {}
        });
    });

    it("should match the snapshot", () => {
        expect(wrapper.element).toMatchSnapshot();
    });
});

I received the following error:

npm test

> vue-jest-testing@1.0.0 test C:\local_data\dev\personal\vue-jest-course\vue-jest
> jest

 PASS  src/services/chatMessageService/chatMessageService.spec.js
 FAIL  src/routes/Chat/Chat.spec.js
  ● 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:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • 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:

    C:\local_data\dev\personal\vue-jest-course\vue-jest\src\routes\Chat\Chat.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
                                                                                             ^

    SyntaxError: Unexpected token '<'

      1 | 
      2 | import { mount } from '@vue/test-utils';
    > 3 | import Chat  from './Chat.vue';
        | ^
      4 | 
      5 | describe("the Chat Service", () => {
      6 | 

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (src/routes/Chat/Chat.spec.js:3:1)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 todo, 1 total
Snapshots:   0 total
Time:        3.703 s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

Resolution

I had a look through the repo and noticed in branch 'upgrade-component' that vue-jest was installed in devDependencies and jest.config.js included the transform attribute. After installing vue-jest and adding the transform object the test then successfully completed.

module.exports = {
    moduleFileExtensions: ["js", "vue"],
    transform: {
        '^.+\\.vue$': 'vue-jest',
        '^.+\\.(js|jsx)?$': 'babel-jest'
    },
    transformIgnorePatterns: ["<rootDir>/node_modules/"]
}

I am assuming this is an issue with my setup but thought I would add this in case others run into the same problem.

By the way enjoyable course so far. Well done.

[angela-mitchell-vmlyr]

@dnorthcoombes I encountered the same issue. I can confirm that adding the transform attribute to jest.config.js and reinstalling Jest works! Thank you for sharing your resolution!

[joshpled]

@dnorthcoombes -- I can also confirm, importantly in conjunction to adding the transform attribute to jest.config.js running npm install --save-dev vue-jest does fix this error. (to reiterate @angela-mitchell-vmlyr) thank you!