Jest Modules Do Not Import Correctly

Question

Dealing with modules in Jest has been a nightmare.

Aside from all the other issues encountered, there is one I have yet to be able to work through.

It looks as certain imports are getting imported incorrectly.

Consider the following trivial example

import * as jp  from 'jsonpath'
console.log('paths: ' + jp.paths)

when running my app code in the browser, this prints

paths: function(obj, string, count) {

  assert.ok(obj instanceof Object, "obj needs to be an object");
  assert.ok(string, "we need a path");

  var results = this.nodes(obj, string, count)
    .map(function(r) { return r.path });

  return results;
}

when running the same code from a Jest test, I get:

   console.log
      paths: undefined

upon debugging the test and inspecting the jp object in the debugger, I see:

Needless to say this does not look correct. When running console.log(jp) from the browser, I see

It seems like Jest is screwing up the module prototype somehow.

My jest.config.js:

const esModules = ['quasar/lang', 'lodash-es'].join('|');

/* eslint-env node */
module.exports = {
  globals: {
    __DEV__: true,
    // TODO: Remove if resolved natively https://github.com/vuejs/vue-jest/issues/175
    'vue-jest': {
      pug: { doctype: 'html' },
    },
  },
  setupFilesAfterEnv: ['/test/jest/jest.setup.ts'],
  // noStackTrace: true,
  // bail: true,
  // cache: false,
  // verbose: true,
  // watch: true,
  collectCoverage: false,
  coverageDirectory: '/test/jest/coverage',
  collectCoverageFrom: [
    '/src/**/*.vue',
    '/src/**/*.js',
    '/src/**/*.ts',
    '/src/**/*.jsx',
    '/src/**/*.tsx',
  ],
  coveragePathIgnorePatterns: ['/node_modules/', '.d.ts$'],
  coverageThreshold: {
    global: {
      //  branches: 50,
      //  functions: 50,
      //  lines: 50,
      //  statements: 50
    },
  },
  testMatch: [
    // Matches tests in any subfolder of 'src' or into 'test/jest/__tests__'
    // Matches all files with extension 'js', 'jsx', 'ts' and 'tsx'
    '/test/jest/__tests__/**/*.(spec|test).+(ts|js)?(x)',
    '/src/**/*.jest.(spec|test).+(ts|js)?(x)',
  ],
  // Extension-less imports of components are resolved to .ts files by TS,
  //  grating correct type-checking in test files.
  // Being 'vue' the first moduleFileExtension option, the very same imports
  //  will be resolved to .vue files by Jest, if both .vue and .ts files are
  //  in the same folder.
  // This guarantee a great dev experience both for testing and type-checking.
  // See https://github.com/vuejs/vue-jest/issues/188#issuecomment-620750728
  moduleFileExtensions: ['vue', 'js', 'jsx', 'json', 'ts', 'tsx'],
  moduleNameMapper: {
    '^quasar$': 'quasar/dist/quasar.common.js',
    '^~/(.*)$': '/$1',
    '^src/(.*)$': '/src/$1',
    '^app/(.*)$': '/$1',
    '^components/(.*)$': '/src/components/$1',
    '^layouts/(.*)$': '/src/layouts/$1',
    '^pages/(.*)$': '/src/pages/$1',
    '^assets/(.*)$': '/src/assets/$1',
    '^boot/(.*)$': '/src/boot/$1',
    '.*css$': '@quasar/quasar-app-extension-testing-unit-jest/stub.css',
  },
  transform: {
    // See https://jestjs.io/docs/en/configuration.html#transformignorepatterns-array-string
    [`^(${esModules}).+\.js$`]: 'babel-jest',
    '^.+\.(ts|js|html)$': 'ts-jest',
    // vue-jest uses find-babel-file, which searches by this order:
    //  (async) .babelrc, .babelrc.js, package.json, babel.config.js
    //  (sync) .babelrc, .babelrc.js, babel.config.js, package.json
    // https://github.com/tleunen/find-babel-config/issues/33
    '.*\.vue$': 'vue-jest',
    '.+\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
      'jest-transform-stub',
  },
  transformIgnorePatterns: [`node_modules/(?!(${esModules}))`],
  snapshotSerializers: ['/node_modules/jest-serializer-vue'],
  testEnvironment: 'jsdom'
};

Any suggestions on how to resolve this?

Thank you.

Jest Modules Do Not Import Correctly

0 Answers