javascript - 如何使动态导入与 Jest 一起使用？

Question

我正在为我的应用程序(Vue.js)编写单元测试，并且在尝试测试动态导入模块的方法时遇到了麻烦。我想模拟库(文件保护程序)以测试它是否被正确调用，但我得到的只是一个错误。模拟文件被完全忽略。

我曾经有一个“require.ensure is not a function”错误，但是在设置 babel-plugin-dynamic-import-node 之后错误发生了变化。

这是我正在测试的方法:

文件.js

[...]
   async saveFile() {
     import('file-saver').then(filesaver => {
       return filesaver.saveAs(data, name);
     })
   },
[...]

测试.js

    describe('testing methods', () => {
      it('exports files correctly', async () => {
        wrapper.vm.exportAddressGroups();
      });
    });

跳到底部看看我遇到了什么错误。

这些是我的配置文件:

jest.config.json

{
  "rootDir": "../",
  "verbose": true,
  "moduleNameMapper": {
    "store/(.*)$": "<rootDir>/src/store/$1",
    "views/(.*)$": "<rootDir>/src/views/$1",
    "components/(.*)$": "<rootDir>/src/components/$1",
    "src/([^\\.]*)$": "<rootDir>/src/$1",
    "user/([^\\.]*)$": "<rootDir>/src/components/user/$1",
    "admin/([^\\.]*)$": "<rootDir>/src/components/admin/$1",
    "shared/([^\\.]*)$": "<rootDir>/src/components/shared/$1",
    "mobile/([^\\.]*)$": "<rootDir>/src/components/mobile/$1",
    "api/([^\\.]*)$": "<rootDir>/src/api/$1",
    "i18n/([^\\.]*)$": "<rootDir>/src/i18n/$1",
    "setup/([^\\.]*)$": "<rootDir>/test/setup/$1",
    "mocks/(.*)$": "<rootDir>/test/mocks/$1",
    "types/([^\\.]*)$": "<rootDir>/types/$1",
    "\\.(png|gif|ttf|eot|svg)$": "<rootDir>/test/mocks/file.js"
  },
  "moduleFileExtensions": ["js", "json", "vue"],
  "modulePathIgnorePatterns": ["<rootDir>/src/components/.*/index.js"],
  "coveragePathIgnorePatterns": [
    "<rootDir>/src/components/.*/index.js",
    "<rootDir>/.*/*.json",
    "<rootDir>/.*/__tests__/.*"
  ],
  "transform": {
    ".+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".+\\.vue$": "<rootDir>/node_modules/vue-jest"
  },
  "setupFiles": [
   "./test/setup/index.js"
  ],
  "coverageDirectory": "<rootDir>/output",
  "collectCoverage": true
}

babelrc

{
  "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
}

package.json (仅以某种方式相关的插件)

    "@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",

我得到的错误如下:

Cannot find module 'function (resolve) {
  require.ensure([], function (require) {
    resolve(require('file-saver'));
  });
}' from 'file.js'

我所能看到的是，代码基本上没有被执行，而是变成了一个字符串。我花了几个小时试图找到解决方案，但在网上找不到类似的东西。

你们有谁知道我做错了什么？

Answer 1

可以试试@babel/plugin-syntax-dynamic-import ?很可能，您也可以摆脱 plugin-syntax-dynamic-import ，使用前者时应该不需要它。