Integration with StoryBook and Jest

Hi, I’m attempting to pick up Tina CMS and use it in a Next.js environment with StoryBook for component driven development.

I’m building all my React components, up-to a page level, as pure presentational components. These presentation components are then wrapped in a container component, within Next.js. My container component does all the heavy lifting (data fetching, side effects and passing said data through to the presentational page component).

I’ve learnt that I will have to apply the inline editing components (supplied by the Tina CMS library) directly within my presentational components (unlike the sidebar, which I can implement at a container level). This has caused two issues:

  • Storybook is now not happy and throwing build errors
  • Jest tests are now failing to run

I suspect these errors are due to the inline editing components, that are within my presentational components, being run without the required Tina CMS provider present. Which will occur when developing my components in isolation in StoryBook and testing my components at a unit level in Jest.

My question’s to the community are:

  • has anyone managed to get Tina CMS to play nicely with StoryBook and Jest, if so how?
  • I presume I need to mock the Tina CMS provider within StoryBook and Jest, does anyone know how to do this?

Thanks in advance

James

I’d love to find a solution to this because my next step is to create stories for each of my block components in storybook. My initial thought is to do something like this…

function Heading({ title, showInlineControls }) {
  return <h1>{showInlineControls ? <InlineTextarea name="title" focusRing={false} /> : title}</h1>
}

export const headingBlock = {
  Component: ({ index, data }) => (
    <BlocksControls index={index} focusRing={{ offset: 0 }}>
      <Heading title={data.title} showInlineControls />
    </BlocksControls>
  ),
  template: {
    label: 'Heading',
    defaultItem: {
      title: 'Title goes here',
    },
    fields: [
      {
        name: 'title',
        label: 'Title',
        component: 'text',
      },
    ],
  },
}

Then when you include the Heading component in a story, omit the showInlineControls prop.

That’s a novel idea, thanks for your contribution. Although I feel what’s required is to mock the tinaProvider, much like how we’d mock a redux store.

Hoping someone from the Tina engineering team can provide some guidance. Failing that I might raise an issue on GitHub.

1 Like