Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

146
Visualizações
vitest: how to add third part library for vue

I want to test my custom vue2 component which use third part library.

package.json

{
    "@vue/test-utils": "^1",
    "vite": "^2.9.13",
    "vitest": "^0.18.1"
}

I added a setupFiles to initial the third part library

vite.config.js

export default {
    test: {
        setupFiles: [
            'src/test/initial.js',
        ],
    },
}

src/test/initial.js

import { afterAll, beforeAll } from 'vitest';
import Vue from 'vue';

import PortalVue from 'portal-vue';

beforeAll(() => {
    Vue.use(PortalVue);
    console.log('initial test vue');
});

I am sure the initial.js has been loaded since the initial test vue is printed on the terminal.


in my test file:

import { mount } from '@vue/test-utils';
import { describe, it, expect } from 'vitest';

import CustomDialog from '~/components/custom-dialog.vue';

const getCustomDialogWrapper = template => {
    return mount({
        data() {
            return {
                show: false,
            };
        },
        components: {
            CustomDialog,
        },
        template: `
            <div>
                <button
                    id="show-dialog-btn"
                    type="button"
                    @click="show = true">
                    show dialog
                </button>
                ${template}
                <portal-target
                    name="dialogs-container"/>
            </div>
        `
    });
}

describe('custom-dialog.vue', () => {
    it('basic dialog without any custom props or title', async () => {
        const wrapper = getCustomDialogWrapper(`
                <custom-dialog
                    v-model="show">
                    dialog content
                </custom-dialog>
            `);
    });
});

But the vitest just can't find the third part library: [Vue warn]: Unknown custom element:

enter image description here

the test file is copy from the old project which works in jest + webpack, how to load the third part library in vitest + vite?

Thanks a lot for anyone helps!

about 4 years ago · Santiago Gelvez
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda