How to run Remix <Link /> Component in Storybook

PublishedNovember 23, 2023

•2 min read•View as Markdown

Luca Pagliaro

A passionate web developer with a focus for continuous growth & delivering exceptional results.

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

Mocking API Calls in Tests with Nuxt 3

Testing plays a crucial role in the development of robust and reliable applications. When building web applications, particularly those that rely on external APIs, testing API calls becomes essential to ensure the functionality of the application und...

Apr 24, 20244 min read

Enhancing Scroll Experience with CSS "scrollbar-gutter"

Have you ever been bothered by those disruptive jolts when scrolling, especially while opening a modal? Fear not! Enter the CSS property scrollbar-gutter—a clever solution to mitigate these unwarranted movements triggered by the appearance or disappe...

Dec 19, 20232 min read

React + TypeScript: Implementing the Polymorphic Button Component

As developers, creating reusable and flexible components is a crucial aspect of building scalable applications. One powerful technique to achieve this is by developing polymorphic components. In this article, we'll explore how to create a polymorphic...

Dec 7, 20232 min read

Sentiero.Digital

4 posts

The Problem:

One of the common challenges developers face when working with Remix and Storybook is the error message that suggests the use of useHref() is limited to the context of a <Router> component. This issue often arises when trying to render Remix components, especially <Link />, in the isolated environment of Storybook.

The error message might look something like this:

useHref() may be used only in the context of a <Router> component.

This error can be frustrating, especially when you're excited about integrating Remix into your Storybook workflow. Fortunately, there's a solution that involves creating a decorator to set up the necessary context for Remix components to function correctly.

The Solution: Creating a Decorator with createRemixStub

To overcome the aforementioned error and successfully run Remix <Link /> components in Storybook, we'll leverage the createRemixStub utility. This utility allows us to set up a minimal Remix environment within Storybook, providing the required context for components like <Link /> to work seamlessly.

Step 1: Install Dependencies

Make sure you have the necessary dependencies for testing in Remix installed in your project. If not, you can install them using npm or yarn:

npm install @remix-run/testing # or yarn add @remix-run/testing

Make sure to install the same version of @remix-run/react and @remix-run/testing!

Step 2: Create a Remix Stub in preview.tsx and use in a decorator

In your Storybook setup, locate the preview.tsx file. If it doesn't exist, create one in the .storybook directory. Add the following code to create a Remix stub:

import type {Preview} from '@storybook/react'; import {createRemixStub} from '@remix-run/testing'; const preview: Preview = { parameters: { // ... }, decorators: [ (Story) => { const RemixStub = createRemixStub([ { path: '*', action: () => ({redirect: '/'}), loader: () => ({redirect: '/'}), Component: () => <Story />, }, ]); return <RemixStub />; }, ], };

With these steps in place, you should now be able to run Remix <Link /> components in Storybook without encountering the previous error.

How to run Remix <Link /> Component in Storybook

Comments

More from this blog

Mocking API Calls in Tests with Nuxt 3

Enhancing Scroll Experience with CSS "scrollbar-gutter"

React + TypeScript: Implementing the Polymorphic Button Component

The Problem:

The Solution: Creating a Decorator with `createRemixStub`

Step 1: Install Dependencies

Step 2: Create a Remix Stub in `preview.tsx` and use in a decorator

Command Palette

Comments

More from this blog

The Problem:

The Solution: Creating a Decorator with createRemixStub

Step 1: Install Dependencies

Step 2: Create a Remix Stub in preview.tsx and use in a decorator

The Solution: Creating a Decorator with `createRemixStub`

Step 2: Create a Remix Stub in `preview.tsx` and use in a decorator