如何测试故事书中功能道具的功能？

Posted 2023-02-19

【中文标题】如何测试故事书中功能道具的功能？

【英文标题】：How to test functionality of function props in storybook?

【发布时间】：2020-09-15 06:28:18

【问题描述】：

我有一个父组件<AssetSelectorMenu>，它由两个子组件组成：

export const AssetSelectorMenu = (( assets, sortByName ) => 

  return (
    <>
      <AssetSelectorHeader sortByName=sortByName />
      assets && assets.map((asset) => (
        <AssetSelectorRow key=asset />
      ))
    </>
  );
);

AssetSelectorMenu 的故事书：

export const Default = () => (
  <AssetSelectorMenu sortByName=action("sortByName") assets=assets />
);

在 AssetSelectorMenu 的故事书中，我想测试一下函数 prop sortByName 实际上是按名称对资产进行视觉排序。目前，它只确保函数被调用，但在视觉上它并没有对资产进行排序。我该怎么做？

【问题讨论】：

您的意思是要向 Storybook 示例添加状态吗？

【参考方案1】：

如果您想在 Storybook 示例中使用状态，以便您的组件基于交互完全工作，您需要使用 React 中的 createElement 函数。

这是一个使用 Checkbox 组件的简单示例，该组件的值由状态管理，模拟使用 Redux 或 Context 等状态管理器。

import  Fragment, useState, createElement  from 'react'

<Preview>
  <Story name="Default">
    createElement(() => 
      const [value, setValue] = useState(['Yes'])
      const onChange = (event, value) => 
        setValue(value)
      
      return (
        <Checkbox
          name="checkbox"
          values=[
             label: 'Yes', value: 'Yes' ,
             label: 'No', value: 'No' 
          ]
          value=value
          onChange=onChange
        />
      )
    )
  </Story>
</Preview>

【讨论】：

以这种方式进行测试是否被视为标准做法？

嗯，我管理着一个企业设计系统，这就是我们确保我们的开发人员、设计师和产品经理能够以现实的方式与我们的组件交互的方式。当您说“测试”时，我们也使用 Jest/Enzyme 进行单元测试，以确保功能按预期工作，在您的情况下，您可以对排序功能进行单元测试，以确保它符合您的预期输出。