Тестирование динамического компонента с помощью import () - TypeError: путь должен быть строкой - PullRequest
Новая
       98

Тестирование динамического компонента с помощью import () - TypeError: путь должен быть строкой

0 голосов
/ 12 ноября 2018

Пожалуйста, помогите, я получил эту ошибку при попытке создать тест для динамического компонента vue js с помощью jest. Я использую babel-plugin-syntax-dynamic-import и babel-plugin-transform-dynamic-import с babel ver> 7.0.0

● Не удалось запустить тестовый набор 

TypeError: Path must be a string. Received undefined

  at TestExclude.shouldInstrument (node_modules/test-exclude/index.js:77:31)
  at shouldSkip (node_modules/babel-plugin-istanbul/lib/index.js:59:21)
  at PluginPass.enter (node_modules/babel-plugin-istanbul/lib/index.js:74:15)
  at newFn (node_modules/@babel/core/node_modules/@babel/traverse/lib/visitors.js:193:21)
  at NodePath._call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:53:20)
  at NodePath.call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:40:17)
  at NodePath.visit (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:88:12)
  at TraversalContext.visitQueue (node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:118:16)

Вот мой код my-page.js: 

const MyComponent = () => import('src/components/MyComponent')
...
components: {
  MyComponent
},
...

myPage.spec.js код: 

import { shallow } from 'vue-test-utils'
import MyPage from '@/pages/MyPage'

describe('MyPage.vue', () => {
  let component

  beforeEach(() => {
    component = shallow(MyPage, {
      ...
    })
    jest.resetModules()
    jest.clearAllMocks()
  })

  it('method#isEven', () => {
    let result = component.vm.isEven(2)
    expect(result).toBe(true)
  })
})

jest.conf.js код: 

const path = require('path')

module.exports = {
  rootDir: path.resolve(__dirname, '../../'),
  moduleFileExtensions: [
    'js',
    'json',
    'vue'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
  },
  testPathIgnorePatterns: [
    '<rootDir>/test/e2e'
  ],
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
  setupFiles: ['<rootDir>/test/unit/setup'],
  coverageDirectory: '<rootDir>/test/unit/coverage',
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js',
    '!src/router/index.js',
    '!**/node_modules/**'
  ],
  testURL: 'http://localhost/unit-test'
}

Нужно ли добавить дополнительные настройки?

1 Ответ

0 голосов
/ 14 ноября 2018

Нет необходимости использовать babel-plugin-syntax-dynamic-import, вместо этого используйте babel-plugin-dynamic-import-node.Реализация может быть замечена в https://jestjs.io/docs/en/webpack.html#using-with-webpack-2

благодаря https://github.com/facebook/jest/issues/5920

...