How to mock next.js image component in storybook?

@samara 

To mock the Next.js Image component in Storybook, you can create a story for the component and use a mock image URL for testing purposes. Here is an example of how to mock the Next.js Image component in Storybook:

1. Create a story for the Next.js Image component in your Storybook:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// Image.stories.js

import React from 'react';
import { Image } from 'next/image';

export default {
  title: 'Components/Image',
  component: Image,
};

const mockImageSrc = 'https://via.placeholder.com/200';

export const Default = () => (
  <Image
    src={mockImageSrc}
    alt="Mock Image"
    width={200}
    height={200}
  />
);

1. In the Default story, you can use a mock image URL (e.g. https://via.placeholder.com/200) as the src prop for the Next.js Image component.
2. Update the paths in your webpack configuration to mock the next/image module in your Storybook setup. You can use the webpackFinal property in your Storybook configuration file (e.g. .storybook/main.js) to mock the Next.js Image module:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// .storybook/main.js

module.exports = {
  webpackFinal: async (config, { configType }) => {
    // Mock the next/image module in Storybook
    config.resolve.alias['next/image'] = path.resolve(__dirname, '../mocks/imageMock.js');

    return config;
  },
};

1. Create a mock file (e.g. imageMock.js) in your Storybook project directory to mock the Next.js Image module:

1
2
3

// mocks/imageMock.js

export const Image = () => <img src="/mock-image.jpg" alt="Mock Image" />;

1. After setting up the mock file and updating the webpack configuration, you should be able to see the mocked Next.js Image component in your Storybook with the mock image URL. You can then further customize the mock image for testing different scenarios.

By following these steps, you can easily mock the Next.js Image component in Storybook for testing and showcasing your UI components.