Open malcolm-kee opened 2 years ago
Note: Storybook instruments (monkey-patch) @testing-library
methods so they can intercept it.
Intention of trying to reuse code for interaction with tests feel clunky as we need to define the interactions outside of the markdown file, but the interactions is dependent on the rendered content.
Reference: https://github.com/malcolm-kee/react-showroom/tree/feature/run-fn
Thinking out loud: maybe parse jest tests and then run it in browser???
After playing around with esbuild
, now I have better idea how to do this:
acorn
and esbuild
, create a file from component test file that will export each test with a function name generated deterministically from the test name. The dependencies of the file will be prebundled (except few libraries, e.g. react
and @testing-library
and those listed in imports
.) (Possible improvement: if it's import the components, maybe just resolve to the component instead).{ [testName]: fnName }
that allows us to generate a path pointing to a specific fnName
associated with a test.InteractionBlock
component will be exported from react-showroom/client
which will accepts a testName
props. The component will use the props in combination of the key-value object above to generates a path, e.g. /_interactions/:componentId/:fnName
that will be used as url of iframe
.iframe
rendered by InteractionBlock
. The reason we want to run this as iframe
is to isolate as much as possible (although we can't do it fully).build
, we also need to prerender the interaction app so the html will be generated for static site hosting.@testing-library/*
usage with custom code, that will allows us to send details about the interactions from interaction app to showroom app, thus enabling play/pause feature like storybookjs.
Inspired by the upcoming StorybookJS Interaction Testing, I am thinking of introducing something similar to React Showroom.
Goals
Must-have
testing-library
as the programmatic way to run simulations.Nice-to-have
Challenges