I'm working with vue 3.4.3 (option API) and vitest and I wan't to test a component containing a chart made with vue-chartjs, here is my test file :
import { expect, describe, test, beforeEach, vi } from 'vitest';
import { mount } from '@vue/test-utils';
import { setActivePinia, createPinia } from 'pinia';
import { fetchCountryList } from '@/services/search';
import { countryListResult } from '@/tests/mocks/search.ts';
import Index from '@/components/Index.vue';
import { createTestingPinia } from '@pinia/testing';
import { vuetify } from '@/tests/config/vuetifyconfig.ts';
// Necessaire pour vuetify
global.ResizeObserver = require('resize-observer-polyfill');
vi.mock('@/services/search');
describe('Index component', () => {
let wrapper;
beforeEach(() => {
setActivePinia(createPinia())
vi.mocked(fetchCountryList).mockResolvedValue(countryListResult);
wrapper = mount(Index, {
global: {
plugins: [vuetify, createTestingPinia({ createSpy: vi.fn, stubActions: false })],
}
});
});
test('mount component', async () => {
expect(Index).toBeTruthy();
expect(wrapper.text()).toContain('Bienvenue');
});
test('interraction bouton de recherche', async () => {
const searchBtn = wrapper.find('#index-search-btn');
expect(searchBtn.element.disabled).toBe(true);
// Quand on rempli le champs, le bouton ne doit plus ĂȘtre disabled
await wrapper.find('#index-name-field').setValue('Test');
expect(searchBtn.element.disabled).toBe(false);
});
});
The test is passed but I got these errors :
stderr | src/tests/components/Index.test.ts > Index component > mount component Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package) at ... Failed to create chart: can't acquire context from the given item
I tried to install canvas package but still got the error, someone can help me please ?