如何在单个故事中模拟窗口变量

Question

我在 React 应用程序中使用Navigator online来确定客户端是否在线。当客户端离线时，我显示离线后备组件。现在我已经将组件设为 Pure - 因此我可以通过将在线状态作为属性传递来在 Storybook 中显示它。但这并不总是合适的解决方案。

所以我想知道如何模拟 Storybook 中单个故事的全局（窗口）变量？我发现唯一的 - 非常脏的解决方案 - 看起来如下：

ClientOffline.decorators = [
  (Story) => {
    const navigatiorInitally = global.navigator

    // I am overwritting the navigator object instead of directly the 
    // online value as this throws an 'TypeError: "x" is read-only' Error
    Object.defineProperty(global, 'navigator', {
      value: { onLine: false },
      writable: false,
    })

    useEffect(() => {
      return () => {
        Object.defineProperty(global, 'navigator', {
          value: navigatiorInitally,
          writable: false,
        })
       location.reload() //needed because otherwilse other stories throw an error
      }
    }, [])

    return <Story />
  },
]

有人有更直接的解决方案吗？

Answer 1

在这个答案中，我假设所有副作用（与导航器通信是副作用）都从组件主体分离到钩子中。

假设您有如下所示的组件：

function AwesomeComponent () {
  let [connectionStatus, setConnectionStatus] = useState('unknown');
  useEffect(function checkConnection() {
    if (typeof window === 'undefined' || window.navigator.onLine) setConnectionStatus('online'); 
    else setConnectionStatus('offline');
  }, []);
  
  if (connectionStatus === 'online') return <OnlineComponent/>
  if (connectionStatus === 'offline') return <FallbackComponent/>
  return null;
}

您可以将挂钩提取到单独的模块中。在我的例子中，它既是状态又是效果。

function useConnectionStatus() {
  let [connectionStatus, setConnectionStatus] = useState("unknown");
  useEffect(function checkConnection() {
    if (typeof window === "undefined" || window.navigator.onLine)
      setConnectionStatus("online");
    else setConnectionStatus("offline");
  }, []);
  return connectionStatus;
}

通过这种方式，您可以将逻辑与表示分离，并可以模拟各个模块。Storybook 提供了模拟各个模块并根据故事进行配置的指南。最好查阅文档，因为软件正在发生变化，并且随着时间的推移，某些事情可能会以其他方式完成。

假设您将文件命名为useConnectionStatus.js. 要模拟它，您必须创建__mock__文件夹，并在那里创建您的模拟模块。例如，它会是这样的：

// __mock__/useConnectionStatus.js
let connectionStatus = 'online';
export default function useConnectionStatus(){
  return connectionStatus;
}

export function decorator(story, { parameters }) {
  if (parameters && parameters.offline) {
    connectionStatus = 'offline';
  }
  return story();  
}

下一步是修改 webpack 配置以使用模拟钩子而不是实际钩子。文档提供了一种从您的.storybook/main.js. 在撰写本文时，它是这样完成的：

// .storybook/main.js

module.exports = {
  // Your Storybook configuration

  webpackFinal: (config) => {
    config.resolve.alias['path/to/original/useConnectionStatus'] = require.resolve('../__mocks__/useConnectionStatus.js');
    return config;
  },
};

现在，使用我们的新装饰器装饰您的预览，您将能够单独为每个特定故事设置配置。

// inside your story
Story.parameters = {
  offline: true
}