如何在Storybook中覆写/模拟导入的常量SHOW_ERRORS？

问题背景 #

我有一个依赖环境常量的React组件：

import { SHOW_ERRORS } from './env.js';

export const ErrorList = React.memo((): JSX.Element | null => {
  return SHOW_ERRORS ? <p>Errors...</p> : null;
});

对应的Storybook故事代码如下：

import type { Meta, StoryObj } from '@storybook/react';
import { ErrorList } from './MappingError.js';

const meta: Meta<typeof ErrorList> = {
  title: 'ErrorList',
  component: ErrorList,
};

export default meta;
type Story = StoryObj<typeof ErrorList>;

export const Default: Story = {};

想问：能不能在Story内部修改或模拟SHOW_ERRORS常量的值？

可行方案 #

当然可以，有几种不同的实现方式，按需选择：

1. 直接模拟模块导出（快速适配现有代码） #

用Jest的mock方法在Story文件里覆盖env.js的导出值，强制控制SHOW_ERRORS的取值。

修改后的Story代码：

import type { Meta, StoryObj } from '@storybook/react';
import { ErrorList } from './MappingError.js';

// 模拟env.js的导出，强制设置SHOW_ERRORS为true
jest.mock('./env.js', () => ({
  SHOW_ERRORS: true,
}));

const meta: Meta<typeof ErrorList> = {
  title: 'ErrorList',
  component: ErrorList,
};

export default meta;
type Story = StoryObj<typeof ErrorList>;

// 显示错误的故事
export const WithErrors: Story = {};

// 不显示错误的故事，重新mock并刷新组件
export const WithoutErrors: Story = {
  render: () => {
    jest.mock('./env.js', () => ({
      SHOW_ERRORS: false,
    }));
    // 因为组件用了React.memo，重新导入避免缓存影响
    const ErrorListMock = require('./MappingError.js').ErrorList;
    return <ErrorListMock />;
  },
};

2. 重构组件，通过props控制（更推荐的长期方案） #

把环境常量改成组件的可选props，默认值沿用SHOW_ERRORS，这样Story里可以直接传参控制，代码更灵活。

修改后的组件代码：

import { SHOW_ERRORS } from './env.js';

export const ErrorList = React.memo(({ showErrors = SHOW_ERRORS }): JSX.Element | null => {
  return showErrors ? <p>Errors...</p> : null;
});

对应的Story代码：

import type { Meta, StoryObj } from '@storybook/react';
import { ErrorList } from './MappingError.js';

const meta: Meta<typeof ErrorList> = {
  title: 'ErrorList',
  component: ErrorList,
  argTypes: {
    showErrors: { control: 'boolean' },
  },
};

export default meta;
type Story = StoryObj<typeof ErrorList>;

// 默认使用环境变量的值
export const Default: Story = {};

// 强制显示错误
export const WithErrors: Story = {
  args: {
    showErrors: true,
  },
};

// 强制隐藏错误
export const WithoutErrors: Story = {
  args: {
    showErrors: false,
  },
};

这种方式不仅能在Storybook里灵活控制，还能在业务代码里根据需要手动切换显示状态。

3. 使用Storybook的环境变量配置 #

如果项目用了Storybook的环境变量，可以在全局或Story级别配置：

首先在.storybook/main.js里添加全局环境变量：

module.exports = {
  // 其他配置...
  env: {
    SHOW_ERRORS: 'true',
  },
};

然后修改组件从process.env读取值：

const SHOW_ERRORS = process.env.SHOW_ERRORS === 'true';

export const ErrorList = React.memo((): JSX.Element | null => {
  return SHOW_ERRORS ? <p>Errors...</p> : null;
});

最后在Story里通过parameters覆盖全局配置：

export const WithErrors: Story = {
  parameters: {
    env: {
      SHOW_ERRORS: 'true',
    },
  },
};

export const WithoutErrors: Story = {
  parameters: {
    env: {
      SHOW_ERRORS: 'false',
    },
  },
};

内容的提问来源于stack exchange，提问作者Sommereder