How to add tests for PrimeVue components?

See original GitHub issue

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!

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
lmiller1990commented, Dec 7, 2020

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!

0reactions
lmiller1990commented, Dec 7, 2020

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Guide to Unit Testing Vue Components - TestDriven.io
This article serves as a guide for unit testing Vue components. ... Create and run a unit test for a Vue component; Test...
Read more >
Unit Testing with PrimeVue - Prime Community Forum
(I'm new to Vue, PrimeVue AND Unit Testing!) I have an InputText component in my template like this: Code: Select all <InputText data-testid=" ......
Read more >
Tips for Unit Testing Vue Components with Jest - Medium
Using Jest to unit test Vue.js components can be tricky. ... Now let's install Vue Test Utils and other dependencies like babel-jest ...
Read more >
Unit Testing in Vue: More complex components
To get started, you will create a new test: /tests/unit/RandomNumber.spec.js and stub out each test that you will write along with a default ......
Read more >
Stubs and Shallow Mount | Vue Test Utils
Vue Test Utils provides some advanced features for stubbing components and directives. A stub is where you replace an existing implementation of a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found