Documentation
Fixture Modules

Fixture Modules

A fixture is a React Component or any React Node. A fixture module contains one or more fixtures.

Node Fixtures

Think of Node fixtures as the return value of a function component, or the first argument to React.render.

Button.fixture.jsx
export default <Button disabled>Click me</Button>;

Component Fixtures

Component fixtures are just React function components with no props. They enable using Hooks inside fixtures, which is powerful for simulating state with stateless components.

CounterButton.fixture.jsx
export default () => {
  const [count, setCount] = React.useState(0);
 
  return <CounterButton count={count} increment={() => setCount(count + 1)} />;
};

Multi-Fixtures

A fixture module can also export multiple fixtures if the default export is an object.

Button.fixture.jsx
export default {
  'Primary': <PrimaryButton>Click me</PrimaryButton>,
 
  'Primary Disabled': <PrimaryButton disabled>Click me</PrimaryButton>,
 
  'Secondary': <SecondaryButton>Click me</SecondaryButton>,
 
  'Secondary Disabled': <SecondaryButton disabled>Click me</SecondaryButton>,
};

The object property names will show up as fixture names in the Cosmos UI.

See this comment (opens in a new tab) for the reasoning behind this solution (vs named exports).

MDX Fixtures

Creating MDX fixtures is as easy as configuring MDX for your bundler (opens in a new tab) and using the .mdx (or .md) file extension for your fixture files.

Both Vite and Webpack examples (opens in a new tab) feature MDX fixtures configured with @mdx-js/rollup and @mdx-js/loader respectively.