Skip to content
This repository has been archived by the owner on Mar 12, 2023. It is now read-only.
/ remix-stubs Public archive

Example Remix unit testing stubs implementation and Storybook integration.

Notifications You must be signed in to change notification settings

jrestall/remix-stubs

Repository files navigation

⚠️ Remix has now released @remix-run/testing (example tests) which should be used instead of remix-stubs. It has a very similar API so migration is easy. With stubbing now built-in to Remix, remix-stubs won't be updated and only works with older versions of Remix such as <v1.9.

remix-stubs

An example implementation and usage of Ryan Florence's createRemixStub design with Storybook and Vitest.

Examples

Tests

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.

Current Issues

There's a few issues and workarounds you will need to be aware of.

Unit Testing

  • 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.

Storybook

  • 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.

About

Example Remix unit testing stubs implementation and Storybook integration.

Topics

Resources

Stars

Watchers

Forks