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)} />;
};
Multi-Fixtures
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.