How to write a test for Vue3 SFC components ?

[SuslegStyle]

Prerequisites

• [X] I have written a descriptive issue title
• [X] I have searched existing issues to ensure the issue has not already been raised

Issue

Hi There.

I'd like to write unit tests for my Vue3 SFC components in my fastify-vite app. I tried to use:

• "@babel/preset-env": "^7.16.11",
• "@vue/test-utils": "^2.0.0-rc.18",
• "@vue/vue3-jest": "^27.0.0-alpha.4",
• "babel-core": "^7.0.0-bridge.0",
• "babel-jest": "^27.4.6",
• "jest": "^27.4.7",

My jest.config.json looks like

module.exports = {
    moduleFileExtensions: ['js', 'json', 'vue'],
    testEnvironment: 'jsdom',
    transform: {
        '^.+\\.js$': 'babel-jest',
        '^.+\\.vue$': '@vue/vue3-jest'
    }
};

And my copyright.spec.js file looks

import {shallowMount} from '@vue/test-utils';
import Copyright from '../../../pageComponents/base/copyright.vue';

describe('Page components / Base / Copyright', () => {
    it('should have correct text', () => {
        const copyrightText = `My copyright text`;
        const wrapper = shallowMount(Copyright);

        expect(wrapper.text()).toContain(copyrightText);
    });
});

When I run tests, I see an error

TypeError: (0 , _vue.createElementVNode) is not a function

Could you please recommend me, how to fix it ? Maybe you have a working example, how to write tests for Vue3 components in fastify-vite apps ?

Thank you.

[wobsoriano]

I'd probably do something like this when testing SSR with Vue

import { createSSRApp, h } from 'vue'
import { renderToString } from '@vue/server-renderer'

it('should have correct text', async () => {
  const app = createSSRApp({
    setup() {
      return () => h(Copyright)
    }
  })
  
  const text = await renderToString(app)

  expect(text).toContain(`My copyright text`)
})

[wobsoriano]

FYI https://test-utils.vuejs.org/guide/advanced/ssr#Testing-Server-side-Rendering