title: How do I make dynamic imports work with Jest?
body: <p>I'm writing unit tests for my application (Vue.js) and I'm having troubles while trying to test a method that imports a module dynamically. I wanted to mock the library (file-saver) to test that it is called correctly but instead all I get is an error. The mock file gets completely ignored.</p>
  
  <p>I used to have a "require.ensure is not a function" error, but after setting up babel-plugin-dynamic-import-node the error changed.</p>
  
  <p>Here is the method I'm testing:</p>
  
  <p>file.js</p>
  
  <pre><code>[...]
     async saveFile() {
       import('file-saver').then(filesaver =&gt; {
         return filesaver.saveAs(data, name);
       })
     },
  [...]
  </code></pre>
  
  <p>test.js</p>
  
  <pre><code>    describe('testing methods', () =&gt; {
        it('exports files correctly', async () =&gt; {
          wrapper.vm.exportAddressGroups();
        });
      });
  </code></pre>
  
  <hr>
  
  <p>Jump to the bottom to see what error I'm getting.</p>
  
  <p>These are my configuration files:</p>
  
  <p>jest.config.json</p>
  
  <pre><code>{
    "rootDir": "../",
    "verbose": true,
    "moduleNameMapper": {
      "store/(.*)$": "&lt;rootDir&gt;/src/store/$1",
      "views/(.*)$": "&lt;rootDir&gt;/src/views/$1",
      "components/(.*)$": "&lt;rootDir&gt;/src/components/$1",
      "src/([^\\.]*)$": "&lt;rootDir&gt;/src/$1",
      "user/([^\\.]*)$": "&lt;rootDir&gt;/src/components/user/$1",
      "admin/([^\\.]*)$": "&lt;rootDir&gt;/src/components/admin/$1",
      "shared/([^\\.]*)$": "&lt;rootDir&gt;/src/components/shared/$1",
      "mobile/([^\\.]*)$": "&lt;rootDir&gt;/src/components/mobile/$1",
      "api/([^\\.]*)$": "&lt;rootDir&gt;/src/api/$1",
      "i18n/([^\\.]*)$": "&lt;rootDir&gt;/src/i18n/$1",
      "setup/([^\\.]*)$": "&lt;rootDir&gt;/test/setup/$1",
      "mocks/(.*)$": "&lt;rootDir&gt;/test/mocks/$1",
      "types/([^\\.]*)$": "&lt;rootDir&gt;/types/$1",
      "\\.(png|gif|ttf|eot|svg)$": "&lt;rootDir&gt;/test/mocks/file.js"
    },
    "moduleFileExtensions": ["js", "json", "vue"],
    "modulePathIgnorePatterns": ["&lt;rootDir&gt;/src/components/.*/index.js"],
    "coveragePathIgnorePatterns": [
      "&lt;rootDir&gt;/src/components/.*/index.js",
      "&lt;rootDir&gt;/.*/*.json",
      "&lt;rootDir&gt;/.*/__tests__/.*"
    ],
    "transform": {
      ".+\\.js$": "&lt;rootDir&gt;/node_modules/babel-jest",
      ".+\\.vue$": "&lt;rootDir&gt;/node_modules/vue-jest"
    },
    "setupFiles": [
     "./test/setup/index.js"
    ],
    "coverageDirectory": "&lt;rootDir&gt;/output",
    "collectCoverage": true
  }
  </code></pre>
  
  <p>babelrc</p>
  
  <pre><code>{
    "presets": [
      ["@babel/preset-env", {
        "useBuiltIns": "entry",
        "targets": "ie 11, last 2 chrome versions, last 2 safari versions, last 2 firefox versions, last 2 edge versions"
      }]
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-proposal-object-rest-spread",
      "@babel/plugin-syntax-dynamic-import",
      "@babel/plugin-syntax-flow",
      "@babel/plugin-transform-async-to-generator",
      "@babel/plugin-transform-flow-strip-types",
      "dynamic-import-webpack"
    ],
    "env": {
      "test": {
        "plugins": ["dynamic-import-node"]
      }
    },
    "comments": false
  }
  </code></pre>
  
  <p>package.json (only somehow relevant plugins)</p>
  
  <pre><code>    "@babel/core": "~7.3.4",
      "@babel/plugin-external-helpers": "~7.2.0",
      "@babel/plugin-proposal-class-properties": "~7.3.4",
      "@babel/plugin-proposal-object-rest-spread": "~7.3.4",
      "@babel/plugin-syntax-dynamic-import": "~7.2.0",
      "@babel/plugin-syntax-flow": "~7.2.0",
      "@babel/plugin-transform-async-to-generator": "~7.3.4",
      "@babel/plugin-transform-flow-strip-types": "~7.3.4",
      "@babel/polyfill": "~7.2.5",
      "@babel/preset-env": "~7.3.4",
      "@babel/register": "~7.0.0",
      "@babel/runtime": "~7.3.4",
      "@vue/test-utils": "^1.0.0-beta.27",
      "babel-core": "7.0.0-bridge.0",
      "babel-eslint": "~10.0.1",
      "babel-jest": "~24.1.0",
      "babel-loader": "~8.0.5",
      "babel-plugin-dynamic-import-node": "^2.2.0",
      "babel-plugin-dynamic-import-webpack": "~1.0.2",
      "fetch-mock": "^7.2.7",
      "jest": "~24.1.0",
      "jest-fetch-mock": "~2.1.1",
      "jest-localstorage-mock": "2.4.0",
      "npm-install-webpack-plugin": "~4.0.5",
      "require-extension-hooks": "~0.3.2",
      "require-extension-hooks-babel": "~0.1.1",
      "require-extension-hooks-vue": "~1.0.1",
      "vue-jest": "~3.0.4",
      "vue-loader": "~15.2.4",
      "vue-style-loader": "~4.1.0",
      "vue-svg-loader": "~0.11.0",
      "webpack": "~4.16.0",
      "webpack-cli": "~3.0.8",
      "webpack-dev-server": "~3.1.4",
      "webpack-merge": "~4.1.3",
      "webpack-monitor": "~1.0.14",
      "webpack-visualizer-plugin": "~0.1.11",
  </code></pre>
  
  <p>The error I get is the following:</p>
  
  <pre><code>Cannot find module 'function (resolve) {
    require.ensure([], function (require) {
      resolve(require('file-saver'));
    });
  }' from 'file.js'
  </code></pre>
  
  <p>All I can see is that instead of being executed, the code is basically turned into a string. I've spent hours trying to find a solution but couldn't find anything similar online.</p>
  
  <p>Does any of you know what I'm doing wrong?</p>