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.

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.

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


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

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.