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

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>