FlatPickr component does not render correctly in vitest tests, may be because of UMD build

[dospunk]

I'm submitting a ... (check one with "x")

[x] Bug report => search github for a similar issue or PR before submitting
[ ] Feature request
[ ] Other, please describe

Tell about your platform

• flatPickr version : 4.6.13
• Vue.js version : 3.2.1
• Browser name and version : Chrome 116.0.5845.141 (Official Build) (64-bit) (cohort: Stable) / jsdom 22.1.0
• This package version : 11.0.3

Current behavior

Everything works fine when running the package normally, but when testing using vitest 0.34.2 a warning is logged saying "Component is missing template or render function." and the component does not seem to function correctly.

Expected behavior

The component should be mounted normally in vitest tests and not log any warning.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/github-6m2gtt

run the pnpm test:unit command to see the warning.

I previously opened an issue with Vue Test Utils thinking that the problem was in that package, but one of the maintainers found that the problem seems to be in the UMD build of vue-flatpickr-component (which vitest uses). This is why the bug only occurs in tests, since running the server in vite normally uses the ESM build.

vuejs/test-utils#2182

[ankurk91]

Well you can see my test cases in this repo

[ankurk91]

Looks like we already generates esm build.
https://unpkg.com/browse/[email protected]/dist/esm/

[aethr]

Hi, I'd like to re-open this issue because I'm seeing the same behaviour with this package after moving to vitest v1. Using FlatPickr works in the browser, but in tests we now get an error in any test that uses the FlatPickr component:

[Vue warn]: Component is missing template or render function.

This appears to be because vitest is importing the UMD module from the package.json main entry:

  "main": "dist/index.umd.js",

As a UMD module, the default export is an object, with a default property, so the component would be available as FlatPickr.default instead of just FlatPickr.

According to an issue comment, vitest has changed its behaviour (possibly around the v1.x release) and is no longer transforming files from node_modules for performance reasons. Where vite might try to correct issues with module type, vitest will no longer attempt the same corrections.

Adding exports to package.json

In the comment, the maintainer of vitest points out that in package.json the module property is not widely supported by the ecosystem. He recommends using an exports property in package.json instead. I've verified this myself by adding an exports property to vue-flatpickr-component locally:

  "name": "vue-flatpickr-component",
  "version": "11.0.3",
  "description": "Vue.js component for Flatpickr date-time picker",
  "main": "dist/index.umd.js",
  "module": "dist/esm/index.js",
  "types": "dist/types/index.d.ts",
  "exports": {
    "import": "./dist/esm/index.js",
    "require": "./dist/index.umd.js"
  },
  ...

This resolves the core issue and allows both vite and vitest to import the esm version of the module correctly. Note, the require part of this is untested as I'm working within an ESM module project.

Edit: edited to make the exports syntax much simpler.

Edit 2: Removed some incorrect info about the change vs on-change event behaviour. What I observed was caused by my own mistake. Apologies!

[ankurk91]

Please test with version 11.0.4 and let me know

[aethr]

Please test with version 11.0.4 and let me know

Upgrading to 11.0.4 fixes our issue with vitest. Thanks!