storybook 暴露一个模拟API

w1e3prcc  于 4个月前  发布在  其他
关注(0)|答案(3)|浏览(37)

您的功能请求是否与问题相关?请描述

在构建组件时,人们希望模拟一些事物以便在某些边缘情况下可视化组件。例如,想象我有一个 useWidth 的 react hook,它在底层使用 IntersectionObserver。我想在 SSR 的情况下测试这个组件(其中宽度 === 0),看看它的表现如何(而不是仅仅为了这个目的而混淆它的属性)。
过去我曾经使用 decorators + sinon.sandbox 来设置某种 https://github.com/insights-io/Insight/blob/master/frontend/shared/storybook/src/decorators/mockDecorator.ts ,但出于某种原因,这种设置在所有环境中都无法正常工作(例如 CRA、NextJS、自定义 webpack 等)。

描述您希望实现的解决方案

我希望 storybook 能够公开一种可靠地在所有环境中工作的模拟 API。它可以只是一个装饰器。
使用 sinon 的示例 API:

Story.decorators = [mockDecorator(sandbox => {
   sandbox.stub(MyModule, 'x').returns(0)
})]

描述您考虑过的替代方案

如上所述,我尝试过自己为这个问题实现解决方案,但它们并不可靠。我认为您内部对 require 机制有更多的控制权,可以更可靠地实现这一点。

您是否能够协助将该功能变为现实?

也许

snz8szmq

snz8szmq1#

到目前为止,我们还没有将这部分纳入核心。在网络层面有一些很棒的模拟插件,例如https://storybook.js.org/addons/msw-storybook-addon/以及axios、apollo客户端等的插件。理想情况下,您描述的功能首先应该作为插件引入,然后在它被烘焙后可能被带入核心。这显然对所有框架和各种用例来说都是一个非常有用的功能!

kxe2p93d

kxe2p93d2#

我们还应该能够模拟一个在故事中展示的组件中使用的子组件
例如,故事是为 <Parent /> 编写的
但是 Parent 的实现使用了 <Child />
我们应该能够在 Parent 的故事中模拟 Child

cunj1qz1

cunj1qz13#

很高兴看到这个进展。这无疑会帮助我们模拟包含第三方插件的子组件,而这些插件我们不想在故事中加载。

相关问题