Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

144
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!