Testing a component with a chart

80 Views Asked by At

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 ?

0

There are 0 best solutions below