Remix Stubs
Example Remix unit testing stubs implementation and Storybook integration.
Overview
Remix-stubs, an older version of Remix, has been replaced by @remix-run/testing for example tests. The new testing package has a similar API, making migration easy. This article provides an example implementation and usage of Ryan Florence's createRemixStub design with Storybook and Vitest. The content also discusses current issues and workarounds, as well as challenges with unit testing and Storybook.
Features
- Migration from remix-stubs to @remix-run/testing
- Example implementation of createRemixStub design with Storybook and Vitest
- Use of preview.tsx and main.ts for Storybook with Vite
- Vitest unit testing examples
Summary
The article introduces the replacement of remix-stubs with the @remix-run/testing package. It provides an example implementation of the createRemixStub design with Storybook and Vitest. The content also discusses current issues and workarounds for unit testing and Storybook. It encourages users to create issues, examples, or discussions to further improve the example implementation.
- Remix
Remix is a modern JavaScript framework that focuses on building fast and performant web applications. It emphasizes a combination of server-rendered content and client-side interactivity, offering a robust architecture for creating scalable and maintainable projects.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.