Vue-jest: Import node_modules component

[jeromeky]

Hi there,

I have some issue to run my tests with component that I import from npm.

I setup a project there where I have the error (did a fork from jest-vue-example)
https://github.com/jeromeky/jest-vue-example

I only added my new dependency inside package.json

"dependencies": { "vue-router": "^2.6.0", "vue-quill-editor": "^2.2.4" },

Then used it inside MessageToggle.vue

import { quillEditor } from 'vue-quill-editor';

  export default {
    components: { quillEditor },
    name: 'message-toggle',
    data: () => ({
      msg: 'default message'
    }),
    methods: {
      toggleMessage () {
        this.msg = this.msg === 'message' ? 'toggled message' : 'message'
      }
    },
  }

But when I running the test, I have this kind of error message :

> [email protected] unit /Users/jerome/git/jest-vue-example
> jest

 FAIL  src/components/__tests__/MessageToggle.spec.js
  ● Test suite failed to run

    /Users/jerome/git/jest-vue-example/node_modules/vue-quill-editor/src/editor.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
                                                                                             ^

    SyntaxError: Unexpected token <

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:306:17)
      at src/components/MessageToggle.vue:8:23

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.103s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] unit: `jest`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jerome/.npm/_logs/2017-09-14T07_54_13_778Z-debug.log

Thanks for your help.

[eddyerburgh]

The problem is that jest does not transform node_modules by default, and quill imports a .vue file in the index.

The solution is to install an npm module and add a couple of lines to the Jest config:

npm install --save-dev jest-css-modules

    "moduleNameMapper": {
      "\\.(css)$": "<rootDir>/node_modules/jest-css-modules"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!vue-awesome|vue-quill-editor)"
    ]

transformIgnorePatterns: says to ignore all node_modules except vue-quill-editor
You also need to install a module that passes css, because vue-quill-editor. You can add extra modules if you need to.

moduleNameMapper lets you stub out resources. You need to stub out css because vue-quill imports css files

[jeromeky]

Awesome, it's perfect.

Thanks you so much !