mockInitialState()

function mockInitialState(results: Fixture[]): State;

mockInitialState() makes it easy to construct prefill the cache with fixtures. It's used in MockPlugin to process the fixtures option. However, this can also be useful to send into a normal provider when testing more complete flows that need to handle dispatches (and thus fetch).

Arguments

results

export type Fixture = SuccessFixture | ErrorFixture;

This prop specifies the fixtures to use data from. Each item represents a fetch defined by the Endpoint and params. Result contains the JSON response expected from said fetch.

This can be used as the initialState option for DataClientPlugin

Example

fixtures.ts

import ArticleResource from 'resources/ArticleResource';

export const results = [
  {
    endpoint: ArticleResource.getList,
    args: [{ maxResults: 10 }],
    response: [
      {
        id: 5,
        content: 'have a merry christmas',
        author: 2,
        contributors: [],
      },
      {
        id: 532,
        content: 'never again',
        author: 23,
        contributors: [5],
      },
    ],
  },
];

import { createApp } from 'vue';
import { DataClientPlugin } from '@data-client/vue';
import { mockInitialState } from '@data-client/vue/test';

import MyComponentToTest from 'components/MyComponentToTest.vue';
import { results } from './fixtures';

const app = createApp(MyComponentToTest);
app.use(DataClientPlugin, { initialState: mockInitialState(results) });
app.mount('#app');