workflows-management-jest-testing

name

workflows-management-jest-testing

description

Use the shared TestProvider in workflows_management Jest tests instead of hand-wiring KibanaContextProvider, QueryClientProvider, WorkflowsContextProvider, MemoryRouter, I18nProvider, and the Redux Provider. Use when writing or updating React/Jest tests under src/platform/plugins/shared/workflows_management/public/**, rendering components or hooks that touch Kibana services, the Redux store, react-query, routing, or i18n.

workflows_management Jest Testing

The workflows_management plugin ships a single shared test provider that wires up every context a component or hook in this plugin typically needs. Use it instead of composing providers by hand.

When to Use

Use TestProvider / getTestProvider for any Jest test under src/platform/plugins/shared/workflows_management/public/** that:

• renders a component or hook that reads from the Redux store,
• calls useKibana() / useStartServices() or otherwise consumes Kibana plugin services,
• uses @kbn/react-query (useQuery, useMutation, …),
• relies on react-router-dom (useHistory, useParams, links, …),
• uses i18n formatted messages,
• consumes WorkflowsContext.

If your test only exercises a pure function with no React tree, you don't need the provider.

Import

import {
  TestProvider,
  getTestProvider,
} from '../../../shared/mocks/test_providers';

The path is public/shared/mocks/test_providers.tsx. Adjust the relative depth to match the test file's location.

API

TestProvider accepts three optional props, all of which are auto-created with sensible defaults if omitted:

• store — Redux store from createMockStore() (public/entities/workflows/store/__mocks__/store.mock). Pass an explicit one when the test needs to dispatch actions or inspect state.
• queryClient — a QueryClient instance. Pass an explicit one when the test needs to seed cache, disable retries, etc.
• services — StartServicesMock from public/mocks.ts (createStartServicesMock()). Pass an explicit one (typically a partial override on top of createStartServicesMock()) when the test needs custom service behavior.

getTestProvider(params) returns a wrapper component for use with @testing-library/react render / renderHook when the test needs to share a specific store / QueryClient / services instance with the rendered tree (e.g. to dispatch actions, inspect state, or seed cache).

When the test does not need to reference any provider value directly, pass TestProvider as the wrapper instead — it builds its own defaults internally.

Patterns

Render with default providers (no custom values needed)

import { render } from '@testing-library/react';
import { TestProvider } from '../../../shared/mocks/test_providers';

it('renders the editor', () => {
  render(<MyComponent />, { wrapper: TestProvider });
});

Render with a shared store the test inspects

Use getTestProvider({ ... }) when the test needs to share a specific provider value (most often the Redux store) with the rendered tree to dispatch actions or assert state.

import { render } from '@testing-library/react';
import { getTestProvider } from '../../../shared/mocks/test_providers';
import { createMockStore } from '../../../entities/workflows/store/__mocks__/store.mock';

it('updates the store on change', () => {
  const store = createMockStore();
  render(<MyComponent />, { wrapper: getTestProvider({ store }) });

  // ...interact with the component...

  expect(store.getState().detail.yamlString).toBe('...');
});

Render a hook

import { renderHook } from '@testing-library/react';
import { TestProvider } from '../../../shared/mocks/test_providers';

it('returns workflow details', () => {
  const { result } = renderHook(() => useWorkflowDetails(), {
    wrapper: TestProvider,
  });
});

Override services for a specific test

import { createStartServicesMock } from '../../../mocks';
import { TestProvider } from '../../../shared/mocks/test_providers';

const services = createStartServicesMock();
services.notifications.toasts.addError = jest.fn();

render(
  <TestProvider services={services}>
    <MyComponent />
  </TestProvider>
);

Anti-patterns

Do not hand-wire any of these inside a test file when TestProvider already provides them:

• KibanaContextProvider from @kbn/kibana-react-plugin/public
• QueryClientProvider from @kbn/react-query
• WorkflowsContextProvider
• MemoryRouter
• I18nProviderMock
• Redux Provider

If a test needs a non-default behavior, override it through the store / queryClient / services props instead of replacing the wrapper.

If a missing context is needed in many tests, add it to TestProvider rather than duplicating wrappers per test file.

Related

• public/mocks.ts — createStartServicesMock, createUseKibanaMockValue, workflowsManagementMocks. Use these for service-level overrides and for typing useKibana mocks.
• public/entities/workflows/store/__mocks__/store.mock.ts — createMockStore for store-level overrides.
• For mocks from other Kibana plugins (e.g. kqlPluginMock, fieldFormatsServiceMock, dataPluginMock, coreMock), prefer the plugin's published */public/mocks entrypoint over rolling your own.