So I have an existing project where I wanted to add testing suite with jest + vue testing library.
Added necessary libs and configs and jest basic calc sum test passes.
After that importing basic vue component, without script part only template works nicely, vue testing lib's render can render successfully.
Problem started when I wanted to render component which has script setup, apparently it does not see any vars defined there, like refs, computeds or handlers with this message:
[Vue warn]: Property or method "goToNextPage" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
, which leads me to believe it cannot mount vue composition api components correctly (or should I say it mounts, but can not use any constructs from script setup).
It also cannot mount child components:
[Vue warn]: Unknown custom element: <CaretIcon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
How to go around this problem?
Edit: Converted script setup component to normal composition api component, and it works nicely (again will fail if child components are using script setup). So I confirmed this is the problem.
jest.config.js
const path = require('path');
module.exports = {
preset: '@vue/cli-plugin-unit-jest',
moduleNameMapper: {
'^vue$': 'vue/dist/vue.common.js',
'^@/(.*)$': path.resolve(__dirname, './vue-src/$1'),
axios: 'axios/dist/node/axios.cjs',
'date-fns': 'date-fns/index.js',
},
moduleFileExtensions: [
'js',
'json',
// tell Jest to handle `*.vue` files
'vue',
],
transform: {
// process `*.vue` files with `vue-jest`
'.*\\.(vue)$': '@vue/vue2-jest',
'.*\\.(js)$': 'babel-jest',
},
};
babel.config.js
module.exports = {
presets: ['@vue/cli-plugin-babel/preset', '@babel/preset-env'],
env: {
production: {
plugins: process.env.CI ? ['transform-remove-console'] : [],
},
},
plugins: [
[
'transform-imports',
{
ramda: {
transform: 'ramda/src/${member}',
preventFullImport: true,
},
'date-fns': {
transform: 'date-fns/esm/${member}',
preventFullImport: true,
},
},
],
],
};