如何在 Storybook 中模拟 Next.js Image 组件？

Question

Next.jsImage在 v10 中引入了一个新组件，它应该是<img>标签的替代品。

尝试查看导入next/imageStorybook 的组件时出现错误：

TypeError: imageData is undefined

我一直在尝试覆盖图像对象preview.js（我使用的一种技术next/router，如此处所述），但我遇到了相同的错误：

// .storybook/preview.js

import Image from 'next/image';

Image = ({ src }) => <img src={src} />;

知道如何覆盖next/imageStorybook 中包的行为吗？

Answer 1

我终于设法让它发挥作用。

首先，我们需要使用默认设置定义一个 env 变量以消除错误。我们可以通过插入 webpack 来做到这一点.storybook/main.js：

// .storybook/main.js
var webpack = require('webpack');

module.exports = {
  ...
  webpackFinal: (config) => {
    config.plugins.push(new webpack.DefinePlugin({
      'process.env.__NEXT_IMAGE_OPTS': JSON.stringify({
        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
        domains: [],
        path: '/',
        loader: 'default',
      }),
    }));
    return config;
  },
};

现在我们可以next/image使用返回一个简单<img/>标签的功能组件来覆盖包中的默认导出。

// .storybook/preview.js

import * as nextImage from 'next/image';

Object.defineProperty(nextImage, 'default', {
  configurable: true,
  value: (props) => {
    return <img {...props} />;
  },
});

我defineProperty为此使用了静态方法（链接到 MDN 文章），因为我不能只为Image.default.