Headless render tests: @storybook/test-runner support or Storyshots alternative?

[flochtililoch]

I wonder what the plan is with regards to headless rendering tests for @storybook/react-native.

I've used Storyshots for the longest time, but it's now deprecated, and the recommended replacement seem to be @storybook/test-runner, which is not directly compatible with React Native. Supposedly it can work if react-native-web is configured (but undocumented for now, does not work out of the box), but this seems a regression over the simplicity of Storyshots (at least, from a "user" perspective, I can't speak about the internals of Storyshots).

Does anyone have perspective on what the road map looks like in that regard?

[dannyhw]

Test runner should work out of the box for react native web, it's no different than running for reactjs which is why there isn't specific documentation on that. If that doesn't work for you please let me know what issue you run into.

In terms of plans for testing I want to get unit testing working with composeStory and testing library. I've seen it work with some small hacks, i believe all that's needed is to take composeStory out of storybook/react and put a version of it in storybook/react-native.

Test runner on native is not really possible In the same way as far as i know. That's because we can't use testing library API's at runtime, they run in a sort of fake dom not a real rn app. The best we can do is a detox integration for example

automatic visual testing similar to chromatic is something that I've already prototyped and want to do but its a lot of work ahead.

once v7 is out i will put testing top of the list

[flochtililoch]

test-runner is only compatible with Storybook 6.X until version 0.9.4, and installing 0.9.4 cause this issue locally for me:

 Validation Error:

  Module @storybook/test-runner/playwright/transform in the transform option was not found.
         <rootDir> is: /Users/f/project

  Configuration Documentation:
  https://jestjs.io/docs/configuration

Installing 0.16.0, or 0.12.0 as suggested here yields the same error.

Trying to remove this line to try skip the issue will then cause other errors pertaining to resolving modules internal to test-runner. Feels like I'm running into a dependency hell.

[dannyhw]

@flochtililoch oh right I see what you mean, I guess thats a problem with being on 6.5 for compatibility with react native storybook. On v7 react native web works well with the test-runner but I haven't recently tried configuring things with 6.5, I'm working on getting v7 for ondevice so hopefully I could solve this by getting us to v7 😅.

[yannbf]

Hey @flochtililoch you could try checking this recipe out as an alternative to storyshots: https://storybook.js.org/docs/writing-tests/storyshots-migration-guide#with-portable-stories

[flochtililoch]

@yannbf thanks for the suggestion! I've just tried it, and am hitting a snag: @storybook/react-native does not export the required function composeStories like @storybook/react does.

I tried instead importing the latter, and this helps getting to the point where stories are rendering (great!), though running into rendering issues, which I suspect are related to this framework mismatch:

    'container' property has been renamed to 'UNSAFE_root'.

    Consider using 'root' property which returns root host element.

      72 |           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
      73 |           await new Promise(resolve => setTimeout(resolve, 1));
    > 74 |           expect(mounted.container).toMatchSnapshot();
         |                          ^
      75 |         });
      76 |       });
      77 |     });

      at Object.container (node_modules/@testing-library/react-native/src/render.tsx:120:13)
      at call (test/render.test.js:74:26)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:64:40)
      at Generator._invoke (node_modules/regenerator-runtime/runtime.js:299:22)
      at Generator.call (node_modules/regenerator-runtime/runtime.js:124:21)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:64:40)
      at invoke (node_modules/regenerator-runtime/runtime.js:160:20)
      at fn (node_modules/regenerator-runtime/runtime.js:170:13)
      at tryCallOne (node_modules/react-native/node_modules/promise/lib/core.js:37:12)
      at node_modules/react-native/node_modules/promise/lib/core.js:123:15

I've tried this on the latest stable @storybook/react-native (7.6.19)

@dannyhw do you have any input? Would implementing composeStories in @storybook/react-native help with the issue aforementioned?

[dannyhw]

Reusing the storybook/react version is intentional, want to avoid reimplementing and it works as long as you adjust slightly how you use it.

The example project has some examples, just use testing library for react native.

Heres one simple example

https://github.com/storybookjs/react-native/blob/next/examples/expo-example/components/ControlExamples/Boolean/Boolean.test.tsx

Also read here https://github.com/storybookjs/react-native/blob/next/PORTABLE_STORIES.md

[flochtililoch]

Thank you both for your input, I was able to get my stories to render by tweaking a bit the suggested example. Will close this now since my issue is solved.