Unit test: Cannot find module 'Vue' from 'vue-form-json-schema.umd.js'

[karladler]

When running my unit tests in the CI I get the following error:

Cannot find module 'Vue' from 'vue-form-json-schema.umd.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)
      at exports (node_modules/vue-form-json-schema/dist/webpack:/VueFormJsonSchema/webpack/universalModuleDefinition:5:40)
      at Object.<anonymous> (node_modules/vue-form-json-schema/dist/webpack:/VueFormJsonSchema/webpack/bootstrap:9:39)

locally the test works pretty fine. We are using composition API. The import inside the component looks like this:

import VueFormJsonSchema from 'vue-form-json-schema';

export default defineComponent({
  components: {
    VueFormJsonSchema,
  },
  // ...

My test file looks like this:

import { mount, Wrapper, createLocalVue } from '@vue/test-utils';
import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';
import VueFormJsonSchema from 'vue-form-json-schema';

import Register from '@/views/Component.vue';

let wrapper: Wrapper<Vue>;

beforeEach(() => {
  const localVue = createLocalVue();
  localVue.use(VueCompositionApi);
  localVue.use(VueFormJsonSchema);
  wrapper = mount(Component, {
    localVue
  });
});

// ...

Has anybody an idea how to fix this?

[jarvelov]

Hi Karl!

It looks like the UMD version is used instead of the ESM version. What happens if you change your import in your test file to explicitly use the ESM version?

Replace

import VueFormJsonSchema from 'vue-form-json-schema';

with

import VueFormJsonSchema from 'vue-form-json-schema/dist/vue-form-json-schema.esm.js';

If this fixes it you could add an alias to your webpack config which would allow you to use import VueFormJsonSchema from 'vue-form-json-schema'; again:

const webpackConfig = {
  //...
  resolve: {
    alias: {
      'vue-form-json-schema': 'vue-form-json-schema/dist/vue-form-json-schema.esm.js'
    }
  }
}

EDIT:

I see now that vue-form-json-schema is missing "type": "module" in package.json, which might be the underlying issue why the UMD version is resolved instead of the ESM version. The type property should be included and I am aiming to release a new version with it soon, which hopefully resolves this issue.

Until then I hope updating the import path/webpack config solves it temporarily for you. Please let me know if you are still having issues after updating the import path.

[nexorianus]

I am having the same Problem. running the tests on my local machine (Node 14.16.0) is all fine. But once i push it to git, and jenkins takes over the automated build it fails with exactly the same error as the OP.

FAIL src/components/utils/dynamicForm/dynamicForm.spec.js
  ● Test suite failed to run
    Cannot find module 'Vue' from 'vue-form-json-schema.umd.js'

      at Resolver.resolveModule (node_modules/jest-runner/node_modules/jest-resolve/build/index.js:259:17)
      at exports (node_modules/vue-form-json-schema/dist/webpack:/VueFormJsonSchema/webpack/universalModuleDefinition:5:40)
      at Object.<anonymous> (node_modules/vue-form-json-schema/dist/webpack:/VueFormJsonSchema/webpack/bootstrap:9:39)

Node versions on Jenkins and local are identical. Currently installed: [email protected]

Tests are run with vue-cli-service test:unit --coverage

"@vue/cli-service": "^4.5.13", "@vue/test-utils": "1.0.3",

Adding the resolve "hack" does not work.

[jarvelov]

Hi, have you tried replacing how VFJS is imported?

Replace

import VueFormJsonSchema from 'vue-form-json-schema';

with

import VueFormJsonSchema from 'vue-form-json-schema/dist/vue-form-json-schema.esm.js';

[nexorianus]

Can confirm! With the direct import of the ESM file, everything works fine.