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的故事书中，我想测试功能道具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>

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

1 个答案: