Unit testing failure with Jest?

[cjosh]

My test suite will fail to run if I'm trying to test a component which uses vuepdf. This is with Jest on a project set up with vue-cli:

` ● Test suite failed to run

C:\frontend\uc-front\node_modules\vue-pdf\src\vuePdfNoSss.vue:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<style src="./annotationLayer.css"></style>

SyntaxError: Unexpected token <`

I don't get this error if I don't import vue-pdf in the component.

[FranckFreiburger]

...,global,jest){<style src... suggest that vuePdfNoSss.vue has not be properly processed by vue loader.
Can you give me more details about this problem ?

[cjosh]

It looks like at least one other person is running into a similar error with vue-cli: vuejs/vue-cli#951. The issue might be unrelated to vue-pdf specifically, but I'm getting pretty much the same error.

[chawlaaditya8]

@cjosh did you solve your issue? I am having a similar issue on the same file.

[chawlaaditya8]

@FranckFreiburger I am facing this issue while using vue-pdf with vue-server-renderer.

[cjosh]

@chawlaaditya8 I ended up switching to Karma/Mocha to get the unit tests to work.

[Kelhen]

made it work by adding vue-pdf and vue-resize-sensor to my jest config like following

jest.config.js

transformIgnorePatterns: [
    '<rootDir>/node_modules/(?!vue-pdf/|vue-resize-sensor/)'
  ]

Then also in my my jest config I added a mocks for the worker like explained here wojtekmaj/react-pdf#67 (comment)

jest.config.js

  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'identity-obj-proxy',
    '\\.worker.js': '<rootDir>/__mocks__/workerMock.js'
  }

create the following file '__mocks__/workerMock.js' in you project and make the path above match it

workerMock.js

module.exports = Object.create(null);

[mickael-spilmont]

I have the same problem, and the solution above doesn't work for me.

EDIT :
One solution that worked for me is to add this in the /src/main.js file :

import pdf from 'vue-pdf'
Vue.component('pdf', pdf)

And remove the import and add of component vue-pdf, in this parent.

[mobsean]

Came across the exact same problem. My solution:

adding to my jest.config.js:

const esModules = ['vue-pdf', 'vue-resize-sensor'].join('|')

module.exports = {
  ....
  transformIgnorePatterns: [`<rootDir>/node_modules/(?!(${esModules}))`]
}