StoryBook：如何测试模态视图？

要测试模态视图，可以使用StoryBook来创建一个独立的故事来展示模态视图的各种状态和行为。以下是一个示例解决方法：

首先，确保已经安装了StoryBook。可以使用以下命令来安装StoryBook：

npm install @storybook/react --save-dev

接下来，创建一个包含模态视图的组件文件，例如Modal.js。在这个文件中，定义一个名为Modal的无状态函数组件，它将接受一个名为isOpen的布尔型prop来控制模态视图的显示和隐藏。代码如下：

import React from 'react';

const Modal = ({ isOpen }) => {
  return (
    <div className={`modal ${isOpen ? 'open' : 'closed'}`}>
      <div className="modal-content">
        <h2>Modal Title</h2>
        <p>Modal content goes here...</p>
      </div>
    </div>
  );
};

export default Modal;

然后，创建一个名为Modal.stories.js的文件，用于在StoryBook中创建一个故事来展示模态视图的不同状态。在这个文件中，导入Modal组件并定义一个名为ModalStory的默认故事。代码如下：

import React from 'react';
import Modal from './Modal';

export default {
  title: 'Modal',
  component: Modal,
};

export const ModalStory = () => <Modal isOpen={true} />;

ModalStory.storyName = 'Open Modal';

export const ClosedModalStory = () => <Modal isOpen={false} />;

ClosedModalStory.storyName = 'Closed Modal';

最后，在终端中运行StoryBook命令以启动StoryBook服务并查看故事。代码如下：

npx start-storybook -p 6006

在浏览器中打开http://localhost:6006，即可看到StoryBook界面，其中包含了名为Modal的故事，并且有一个默认故事“Open Modal”，以及一个名为“Closed Modal”的故事。点击故事，即可在右侧的预览区域看到模态视图的不同状态。

通过这种方式，可以方便地在StoryBook中测试和展示模态视图的不同状态和行为。