vuejs / vue-jest

Jest Vue transformer
MIT License
748 stars 156 forks source link

Get the "Unknown custom element" when running test on the component using <script setup> in Vue 2.7 #496

Closed Ceall8650 closed 2 years ago

Ceall8650 commented 2 years ago

Hi everyone

I write my component with composition API in Vue 2.7, and I also use <script setup> in my component. When I run the test, I got the warning message in the console

console.error
    [Vue warn]: Unknown custom element: <CustomComponent> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    found in

    ---> <Anonymous>
           <Root>

      3 |
      4 | describe('CustomComponent component', () => {
    > 5 |       const wrapper = mount(CustomComponent);
        |                       ^
      6 |
      7 |       it('renders component correctly', () => {
      8 |               expect(wrapper.element).toMatchSnapshot();

Does anyone have encountered the similar issue and solve it successful?

My component is more like below

// MyComponent.vue

<template>
    <div>
        <CustomComponent />
    </div>
</template>

<script setup>
import CustomComponent from './CustomComponent.vue';

<script>

test case

import { mount } from '@vue/test-utils';
import CustomComponent from 'pages/CustomComponent.vue';

describe('CustomComponent component', () => {
    const wrapper = mount(CustomComponent);

    it('renders component correctly', () => {
        expect(wrapper.element).toMatchSnapshot();
    });
});

Environment

vue: ^2.7.10 @vue/vue2-jest: ^29.0.0 babel-jest: 29.0.3 @vue/test-utils: ^1.3.0

C-Westbrook commented 2 years ago

try

lmiller1990 commented 2 years ago

Try 29.1.0 https://github.com/vuejs/vue-jest/releases/tag/v29.1.0 a PR was merged hopefully fixing Vue 2.7 and script setup.

Ceall8650 commented 2 years ago

@lmiller1990 It works! Thanks!