Compatibility with @vue/cli-plugin-unit-jest

[slaweet]

When I'm testing my component with https://cli.vuejs.org/core-plugins/unit-jest.html and my component contains import vueJsonCompare from 'vue-json-compare', then the Jest test runner fails with:

  ● 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:
     • 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:

    /home/slaweet/git/review-telltale-vue/node_modules/vue-json-compare/src/index.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
                                                                                             ^

    SyntaxError: Unexpected token '<'

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (node_modules/vue-json-compare/index.js:2:18)

I can resolve the error by mocking vue-json-compare with

jest.mock('vue-json-compare', () => (                                                             
  (fn: (...args: any[]) => void) => fn                                                               
));

But with all other 3-rd party modules, I don't have to do this.

[alexfaus08]

I ended up resolving the above error by modifying my jest.config.js file to include the following so I don't have to mock out vue-json-compare in each test file:

module.exports = { preset: '@vue/cli-plugin-unit-jest', moduleNameMapper: { '\\.(css|less|gql|sass|scss)$': 'jest-transform-stub', }, transformIgnorePatterns: [ 'node_modules/(?!vue-json-compare)', ], };

However, you are correct in that with other 3rd party modules I did not have to do this.