nuxt3-class-component
nuxt3-class-component copied to clipboard
Using nuxt3-class-component in Jest tests
At first thanks for this module. We're currently migrating a Nuxt2 app to Nuxt3, and as we're using the nuxt-property-decorator
with class components, we're now able to use our components in Nuxt3 thanks to your module.
Unfortunately it doesn't work in our component tests using Jest. When Jest runs the component tests, the following errors occurs:
FAIL test/components/shared/CustomFieldForm.test.ts
● Test suite failed to run
Cannot find module 'nuxt-property-decorator' from 'components/shared/CustomFieldForm.vue'
Require stack:
components/shared/CustomFieldForm.vue
test/components/shared/CustomFieldForm.test.ts
176 | * whether the component is in readonly mode or not
177 | */
> 178 | @Prop({
|
179 | default: false,
180 | type: Boolean
181 | })
at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:427:11)
at Object.<anonymous> (components/shared/CustomFieldForm.vue:178:33)
at Object.<anonymous> (test/components/shared/CustomFieldForm.test.ts:35:1)
I can assume that this errors happens, as the tests are not running in the Nuxt context. As you wrote:
Unlike the original nuxt-property-decorator, this package is implemented as a Nuxt module. This is because it uses defineNuxtComponent internally, which doesn't work outside of Nuxt compilation context.
Are you aware of a way to setup Jest so that I can also use the functionality in the component tests?