How to mock NextJS next/future/image in Storybook

When using Storybook for building and testing components, you may frequently need to mock specific Next.js components or methods, such as next/future/image, due to Storybook operating in an isolated environment that doesn't natively support all Next.js features. To effectively mock next/future/image in Storybook, follow these configuration steps.

Step 1: Install Required Dependencies

First, ensure Next.js and Storybook are installed in your project. If not, install them using the following commands:

bash
npx create-next-app your-project-name
cd your-project-name
npx sb init

Step 2: Create a Mocked next/future/image Component

Since the Image component from Next.js has specific loading strategies and optimizations, simulate its functionality by creating a simplified version. Create a mock file at /__mocks__/next/future/image.js:

jsx
// In /__mocks__/next/future/image.js

const MockedImage = ({ src, alt, width, height, layout, ...props }) => {
  // Adjust styles based on the layout property
  const style = layout === 'fill' ? { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } : {};

  return <img src={src} alt={alt} width={width} height={height} style={style} {...props} />;
};

export default MockedImage;

Step 3: Configure Storybook to Use the Mock Component

Update the Storybook configuration file to use your mock component when loading stories. Add the following code to .storybook/preview.js:

javascript
import * as NextImage from 'next/future/image';

Object.defineProperty(NextImage, 'default', {
  configurable: true,
  value: require('../__mocks__/next/future/image').default,
});

This configuration tells Storybook to replace the original next/future/image with your mock component during story loading.

Step 4: Use the Mocked Image Component in Storybook

You can now use next/future/image as usual in your Storybook stories. For example:

jsx
import Image from 'next/future/image';

export const MyImage = () => (
  <Image
    src="/path/to/image.jpg"
    alt="Description"
    width={500}
    height={300}
    layout="responsive"
  />
);

export default {
  title: 'Example/MyImage',
  component: MyImage,
};

This setup allows you to preview and test components using next/future/image in Storybook without compatibility or environment concerns.

Summary

By following these steps, you can effectively mock the Next.js next/future/image component within Storybook, streamlining component development and testing. This approach is also applicable to mocking other framework-specific components.