Cannot find module from .vue file

[dotnetCarpenter]

I'm using an external global module, that seems to break vue-jest with the following error:

Cannot find module 'PSPDFKit' from 'Search.vue'

vue-jest: 3.0.0
jest: 23.6.0
vue-loader: 13.7.2
node: v8.12.0

In my package.json I have set the global, which works fine for all .js files but not .vue files.

"jest": {
    "browser": true,
    "testURL": "https://demo.nappsiesta.com/v2/demo/",
    "roots": [
        "<rootDir>/resources/assets/js/"
    ],
    "testEnvironment": "jest-environment-jsdom-global",
    "globals": {
        "PSPDFKit": {
            "LayoutMode": {
                "AUTO": "AUTO",
                "SINGLE": "SINGLE",
                "DOUBLE": "DOUBLE"
            }
        }
    },
    "setupFiles": [
        "jest-date-mock"
    ],
    "moduleFileExtensions": [
        "js",
        "json",
        "vue"
    ],
    "transform": {
        ".*\\.(vue)$": "vue-jest",
        "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    }
},
"devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.25",
    "babel-jest": "^23.6.0",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-regenerator": "^6.26.0",
    "html-webpack-externals-plugin": "^3.8.0",
    "jest": "^23.6.0",
    "jest-date-mock": "^1.0.6",
    "jest-environment-jsdom-global": "^1.1.0",
    "jsdom": "^13.0.0",
    "laravel-mix": "^2.1.14",
    "vue-jest": "^3.0.0"
},

package.json

I've tried to set "externals" in my .babelrcbut to no avail.

{
  "env": {
    "test": {
      "presets": [
        ["env", {
          "targets": {
            "node": "current"
          },
          "externals": {
            "PSPDFKit": "PSPDFKit"
          }
        }]
      ]
    }
}

.babelrc

In vue-jest/lib/process.js jestConfig has the "globals" but not the "externals" from .babelrc.
vueJestConfig is an empty object.

npx jest --showConfig:

{
  "configs": [
    {
      "automock": false,
      "browser": true,
      "cache": true,
      "cacheDirectory": "/var/folders/6v/0vmk1h6j7qbgs5xfh4bk4f7m0000gp/T/jest_dy",
      "clearMocks": false,
      "coveragePathIgnorePatterns": [
        "/node_modules/"
      ],
      "detectLeaks": false,
      "detectOpenHandles": false,
      "errorOnDeprecated": false,
      "filter": null,
      "forceCoverageMatch": [],
      "globals": {
        "PSPDFKit": {
          "LayoutMode": {
            "AUTO": "AUTO",
            "SINGLE": "SINGLE",
            "DOUBLE": "DOUBLE"
          }
        }
      },
      "haste": {
        "providesModuleNodeModules": []
      },
      "moduleDirectories": [
        "node_modules"
      ],
      "moduleFileExtensions": [
        "js",
        "json",
        "vue"
      ],
      "moduleNameMapper": {},
      "modulePathIgnorePatterns": [],
      "name": "5c39c6522d838d54c97c5f7c7838b537",
      "prettierPath": "/Users/nappdev/projects/final/PDFViewer/node_modules/prettier/index.js",
      "resetMocks": false,
      "resetModules": false,
      "resolver": null,
      "restoreMocks": false,
      "rootDir": "/Users/nappdev/projects/final/PDFViewer",
      "roots": [
        "/Users/nappdev/projects/final/PDFViewer/resources/assets/js"
      ],
      "runner": "jest-runner",
      "setupFiles": [
        "/Users/nappdev/projects/final/PDFViewer/node_modules/regenerator-runtime/runtime.js",
        "/Users/nappdev/projects/final/PDFViewer/node_modules/jest-date-mock/lib/index.js"
      ],
      "setupTestFrameworkScriptFile": null,
      "skipFilter": false,
      "snapshotSerializers": [],
      "testEnvironment": "/Users/nappdev/projects/final/PDFViewer/node_modules/jest-environment-jsdom-global/environment.js",
      "testEnvironmentOptions": {},
      "testLocationInResults": false,
      "testMatch": [
        "**/__tests__/**/*.js?(x)",
        "**/?(*.)+(spec|test).js?(x)"
      ],
      "testPathIgnorePatterns": [
        "/node_modules/"
      ],
      "testRegex": "",
      "testRunner": "/Users/nappdev/projects/final/PDFViewer/node_modules/jest-jasmine2/build/index.js",
      "testURL": "https://demo.nappsiesta.com/v2/demo/",
      "timers": "real",
      "transform": [
        [
          ".*\\.(vue)$",
          "/Users/nappdev/projects/final/PDFViewer/node_modules/vue-jest/vue-jest.js"
        ],
        [
          "^.+\\.js$",
          "/Users/nappdev/projects/final/PDFViewer/node_modules/babel-jest/build/index.js"
        ]
      ],
      "transformIgnorePatterns": [
        "/node_modules/"
      ],
      "watchPathIgnorePatterns": []
    }
  ],
  "globalConfig": {
    "bail": false,
    "changedFilesWithAncestor": false,
    "collectCoverage": false,
    "collectCoverageFrom": null,
    "coverageDirectory": "/Users/nappdev/projects/final/PDFViewer/coverage",
    "coverageReporters": [
      "json",
      "text",
      "lcov",
      "clover"
    ],
    "coverageThreshold": null,
    "detectLeaks": false,
    "detectOpenHandles": false,
    "errorOnDeprecated": false,
    "expand": false,
    "filter": null,
    "globalSetup": null,
    "globalTeardown": null,
    "listTests": false,
    "maxWorkers": 3,
    "noStackTrace": false,
    "nonFlagArgs": [],
    "notify": false,
    "notifyMode": "always",
    "passWithNoTests": false,
    "projects": null,
    "rootDir": "/Users/nappdev/projects/final/PDFViewer",
    "runTestsByPath": false,
    "skipFilter": false,
    "testFailureExitCode": 1,
    "testPathPattern": "",
    "testResultsProcessor": null,
    "updateSnapshot": "new",
    "useStderr": false,
    "verbose": null,
    "watch": false,
    "watchman": true
  },
  "version": "23.6.0"
}

[dotnetCarpenter]

vue-jest/lib/compilers/babel-compiler.js babelOptions options has:

externals:PSPDFKit:"PSPDFKit"

[dotnetCarpenter]

@eddyerburgh Do you think #129 will help in my case? Do you know how to define an external module in vue-jest?

In webpack (3.12.0) I do the following but not sure how that translate to jest/vue-jest.

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')

// https://github.com/JeffreyWay/laravel-mix/blob/master/docs/quick-webpack-configuration.md
mix.webpackConfig(webpack => {
    return {
        plugins: [
            new HtmlWebpackExternalsPlugin({
                externals: [
                    {
                        module: 'PSPDFKit',
                        entry: process.env.SIESTA_WEBVIEWER_ENGINE_URL + '/pspdfkit.js',
                        global: 'PSPDFKit'
                    }
                ]
            })
        ]
    }
})

[eddyerburgh]

No that PR won't solve this issue.

You could use the Jest globals option:

{
  ...
  "jest": {
    "globals": {
      "PSPDFKit": {  someMethod: () => {} }
    }
  }
}

[dotnetCarpenter]

@dotnetCarpenter That's is what I am doing.

package.json:

globals": {
  "PSPDFKit": {
        "LayoutMode": {
            "AUTO": "AUTO",
            "SINGLE": "SINGLE",
            "DOUBLE": "DOUBLE"
        }
    }
},

From original post

Which I have confirmed using npx jest --showConfig - also posted in the original post.

I've debugged vue-jest but can not see anywhere that vue-jest uses the globals property to do anything.

@eddyerburgh How is it suppose to work?

[eddyerburgh]

Hey, sorry for the slow reply. The globals option works as expected in master, which I will release as v4-beta today.

[dotnetCarpenter]

@eddyerburgh Thanks. I will update and see if it fixes the issue

[dotnetCarpenter]

@eddyerburgh I finally got around to try your the beta. 4.0.0-beta.2 fixes the issue.
Thanks! 💃