An example implementation and usage of Ryan Florence's createRemixStub design with Storybook and Vitest.
- create-remix-stub.tsx for a stub implementation.
- preview.tsx and main.ts for a Storybook 7.0 w/ Vite example.
- LikeButton.test.tsx for Ryan's Vitest unit testing example.
- new.test.tsx for an initialActionData example.
- login.test.tsx for a login form submission test with vitest mocks to assert the action has been called once.
- $teamId.test.tsx for an example that uses useOutletContext().
Whilst I won't be publishing remix-stubs as a package, since it relies on deep imports from Remix, please do create issues, examples or discussions so that the example implementation can be improved.
There's a few issues and workarounds you will need to be aware of.
- global.FormData wasn't being set to the jsdom class. Manually set it in setup-test-env.ts.
- happy-dom doesn't support formdata or form submissions so if unit testing those you should set the vitest environment to jsdom in vitest.config.js.
- jsdom's form submission support isn't perfect and won't pass the form submit button's value as documented in LikeButton.tsx.
- Due to the deep import of RemixEntry in create-remix-stub.tsx from @remix-run/react, you may find webpack/vite bundles both a esm and cjs version of the components code, which causes React context to be inconsistent. For vite I've added an alias in .storybook/main.ts as a temporary workaround.