Skip to main content

Testing Libraries

@availity/workflow uses Vitest as its test runner. Tests run via av test or yarn test.

Included Libraries​

  • vitest — test runner and assertion library
  • @testing-library/react — React component testing utilities
  • @testing-library/jest-dom — custom DOM matchers (works with Vitest)
  • jsdom — browser environment for tests

Setup​

Create a vitest.setup.js file at your project root to add global test configuration:

import '@testing-library/jest-dom/vitest';

Then reference it in workflow.js:

/** @type {import('@availity/workflow').WorkflowConfigFunction} */
export default (config) => {
  config.development.vitestOverrides = {
    setupFiles: ['./vitest.setup.js'],
  };
  return config;
};

For @availity/workflow-vite, it's the same pattern:

/** @type {import('@availity/workflow-vite').WorkflowViteConfigFunction} */
export default (config) => {
  config.development.vitestOverrides = {
    setupFiles: ['./vitest.setup.js'],
  };
  return config;
};

Customizing Test Config​

Use vitestOverrides to tune timeout, environment, coverage thresholds, and more:

/** @type {import('@availity/workflow').WorkflowConfigFunction} */
export default (config) => {
  config.development.vitestOverrides = {
    setupFiles: ['./vitest.setup.js'],
    testTimeout: 15000,
    environment: 'jsdom', // default — use 'node' for non-DOM tests
    coverage: {
      provider: 'v8',
      reporter: ['text', 'lcov'],
      thresholds: {
        statements: 80,
        branches: 80,
      },
      exclude: ['**/types/**', '**/dist/**'],
    },
  };
  return config;
};

Note on clearMocks: Vitest 5 changed the default for clearMocks to true. @availity/workflow pins it to false to preserve pre-Vitest-5 behavior. Opt in explicitly if you want mocks cleared before each test:

config.development.vitestOverrides = { clearMocks: true };

Example Test​

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import App from './App';

describe('App', () => {
  it('renders heading', () => {
    render(<App />);
    expect(screen.getByRole('heading')).toBeInTheDocument();
  });
});

Mocking API Responses​

import { vi, describe, it, expect } from 'vitest';

vi.mock('axios');

describe('data fetching', () => {
  it('fetches user data', async () => {
    const axios = await import('axios');
    axios.default.get.mockResolvedValue({ data: { name: 'Jane' } });
    // ... test component that calls axios
  });
});

More Info​