How to add tests for PrimeVue components?

Version

2.0.0-beta.9

Steps to reproduce

I use PrimeVue and vue 3. Tests don’t understand PrimeVue components. How do I configure it correctly?

jest.config.js

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  "moduleFileExtensions": ["js", "json", "vue"],
  "transform": {
    "^[^.]+.vue$": "vue-jest",
    "^.+\\.js$": "babel-jest"
  }
}

example test

import { mount, config } from '@vue/test-utils'

import SignUp from '../SignUp.vue'

config.global.mocks = config.global.mocks || {}
config.global.mocks.$style = {}

describe('Sign up', () => {
  const wrapper = mount(SignUp)

  it('SignUp exists', () => {
    expect(wrapper.exists()).toBe(true)
  })
}

error

Jest encountered an unexpected token

  This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

  By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

  Here's what you can do:
   • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
   • If you need a custom transformation specify a "transform" option in your config.
   • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

  You'll find more details and examples of these config options in the docs:
  https://jestjs.io/docs/en/configuration.html

  Details:

  /Users/glebpologov/tmp/vue-chat/node_modules/primevue/components/toast/Toast.vue:1
  ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
                                                                                           ^

  SyntaxError: Unexpected token '<'

Possible Solution

I tried to add PrimeVue to ignore. But I have dependencies that give an error. "transformIgnorePatterns": ["node_modules/(?!(primevue)/)"]

  Sign up
    ✕ encountered a declaration exception (5ms)

  ● Sign up › encountered a declaration exception

    No PrimeVue Toast provided!

[lmiller1990]

I just tried this and it worked.

1. new Vue cli project
2. I chose babel and vue 3
3. add primevue
4. Update jest.config.js

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  transform: {
    '^.+\\.vue$': 'vue-jest'
  },
  transformIgnorePatterns: [
    "<rootDir>/node_modules/(?!primevue/.*)"
  ]
}

Working!

[lmiller1990]

@afontcu PrimeVue is one of the early UI libs that is compatible with Vue 3.

The problem is actually on PrimeVue’s end - if you look at the stack trace:

... /Users/glebpologov/tmp/vue-chat/node_modules/primevue/components/toast/Toast.vue ...

PrimeVue probably should not be distributing vue files, but compiling things to regular js files. vue-jest (and other jest transformers) will ignore node_modules by default - it assumes people are distributing their projects using regular js.

Luckily there is a work around for this. You can use transformIgnorePatterns to specify certain paths, something like as shown here:

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

This is definitely not an issue with test utils, but tooling/configuration. The above work around is probably okay, but i would recommend making an issue in PrimeVue asking them to compile everrything to commonjs and/or es modules for distribution.