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

Question

我有一个父组件<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 实际上是按名称对资产进行视觉排序。目前，它只确保函数被调用，但在视觉上它并没有对资产进行排序。我该怎么做？

Answer 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>