Test Environments

Axiom should work out of the box with most testing libraries. But certain test environments may require custom configuration to work.

#
Global provider

#
Wrap tests in AxiomProvider

Always make sure to wrap your elements with AxiomProvider during tests.

For example if you’re using React Testing Library then you should export a custom render function that sets AxiomProvider as the default wrapper.


import { AxiomProvider } from "@optiaxiom/react";
import { render } from "@testing-library/react";
 
const customRender = (...args: Parameters<typeof render>) => ({
  ...render(args[0], {
    wrapper: AxiomProvider,
    ...args[1],
  }),
});
 
export * from "@testing-library/react";
export { customRender as render };

Running animations during unit tests can cause unpredictable test results or force developers to write more code waiting for animations to finish. Instead a better strategy is to disable animations during unit tests to ensure consistent test results.

Enable the TransitionGlobalConfig.skipAnimations option to disable animations.


import { TransitionGlobalConfig } from "@optiaxiom/react";
 
// Do this in your global test setup file
TransitionGlobalConfig.skipAnimations = true;

#
Cleanup toasts and dialogs

Toasts and managed dialogs are persisted globally which can cause tests to affect one another.

Use the cleanup method to clear out toasts and dialogs in your test setup/teardown hooks.


import { cleanup } from "@optiaxiom/react";
 
beforeEach(() => {
  cleanup();
});

#
Jest

#
Mock CSS imports

Jest does not support CSS imports by default and needs to be manually configured to handle them.

Install the jest-transform-stub package.


npm install -D jest-transform-stub


pnpm add -D jest-transform-stub


yarn add --dev jest-transform-stub


bun add --dev jest-transform-stub

Stub CSS files by transforming them into empty modules in your Jest config file.

jest.config.js


module.exports = {
  moduleNameMapper: {
    "\\.css$": "jest-transform-stub",
  },
};

#
Vitest

#
Process CSS imports

Vitest does not process CSS imports from within dependencies by default. So we have to manually configure it to bundle the Axiom dependencies:

vitest.config.ts


import { defineConfig } from "vitest/config";
 
export default defineConfig({
  test: {
    server: {
      deps: {
        inline: ["@optiaxiom"],
      },
    },
  },
});

#
Cannot find ‘react/jsx-runtime’

If you’re using React 16 or 17 then running tests using Vitest will cause errors like this:


Error: Cannot find module 'react/jsx-runtime' imported from /node_modules/@optiaxiom/react/...
Did you mean to import "react/jsx-runtime.js"?

In order to fix this we have to manually configure it to bundle the Axiom dependencies:

vitest.config.ts


import { defineConfig } from "vitest/config";
 
export default defineConfig({
  test: {
    server: {
      deps: {
        inline: ["@optiaxiom", "@radix"],
      },
    },
  },
});