Mocking injizierter Abhängigkeiten in Komponententests

Snippet

Mocking injizierter Abhängigkeiten in Komponententests

Beim Testen von Komponenten, die auf `inject` angewiesen sind, müssen Sie den Provider simulieren. Die Vue Test Utils ermöglichen es Ihnen, Mocks über die Option `global.provide` zu injizieren, wodurch die Komponente von echten API-Aufrufen oder komplexem globalen Status isoliert wird.

snippet.js
javascript
import { mount } from '@vue/test-utils';
import { ApiServiceKey } from '@/keys';
 
test('renders data from API', async () => {
  const mockApi = { fetchData: vi.fn(() => Promise.resolve('Data')) };
  const wrapper = mount(MyComponent, {
    global: {
      provide: {
        [ApiServiceKey]: mockApi
      }
    }
  });
  // Assertions...
});

vue

Erklärung

const mockApi = { fetchData: vi.fn(...) };

Erstellt ein Spy- oder Mock-Objekt, das das erwartete Interface des Dienstes nachahmt.

mount(MyComponent, { global: { provide: { ... } } });

Mountet die Komponente und liefert gleichzeitig die Mock-Implementierung für den angegebenen Symbol-Key.

[ApiServiceKey]: mockApi

Verwendet die Syntax für berechnete Eigenschaften, um den Symbol-Key Ihrer Mock-Implementierung zuzuordnen.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Verwandt

Aus deiner Bibliothek