Tips to use Storybook at Twenty

[Devessier]

Hey! I had to play with Storybook and wrote a few tips. Feel free to expand this list!

Execute Storybook Test Runner on a single file

Start the Storybook dev server:

npx nx run twenty-front:storybook:serve:dev

Then, execute the test runner of the file you want:

cd packages/twenty-front

npx @storybook/test-runner <path of the story file>

Override a global MSW mock in a story

Some MSW handlers are put in the global scope, in the graphqlMocks.handlers array. If you want to override these global mocks, be sure to define your mock first.

export const BlankInitialVersion: Story = {
  args: {
    workflowId: blankInitialVersionWorkflowId,
  },
  parameters: {
    msw: {
      handlers: [
        graphql.query('MyCustomHandler', () => {}),
        ...graphqlMocks.handlers,
      ],
    },
  },
};