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