Как заставить динамический импорт работать с Jest? - PullRequest
Новая
       24

Как заставить динамический импорт работать с Jest?

2 голосов
/ 06 июня 2019

Я пишу модульные тесты для своего приложения (Vue.js), и у меня возникают проблемы при попытке протестировать метод, который динамически импортирует модуль. Я хотел издеваться над библиотекой (файловой заставкой), чтобы проверить, правильно ли она вызывается, но вместо этого я получаю только ошибку. Файл макета полностью игнорируется.

Раньше у меня была ошибка «require.ensure is not function», но после настройки babel-plugin-dynamic-import-node ошибка изменилась.

Вот метод, который я тестирую:

file.js 

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

test.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'

Все, что я могу видеть, это то, что вместо выполнения код в основном превращается в строку. Я часами пытался найти решение, но не мог найти ничего похожего в Интернете.

Кто-нибудь из вас знает, что я делаю неправильно?

...