如何使用 React 测试库和 Effector（状态管理器）测试 React 组件

【问题标题】：How to test React components using React Testing Library and Effector (state manager)如何使用 React 测试库和 Effector（状态管理器）测试 React 组件
【发布时间】：2022-10-20 09:54:21
【问题描述】：

我正在使用effector 和 React 测试库 (RTL)。在 RTL 的文档中有 article 关于 customerRender ，我们将 AllTheProviders 作为渲染函数的 wrapper 传递。

问题：如何对effector 做同样的事情（在那里找不到提供者）？以及如何模拟商店，因为可能不止一个（提供者的价值）？

最后，我只想使用render(<Component />) 而不传递任何额外数据，如doc 所示。

【问题讨论】：

标签： reactjs typescript react-testing-library effector

【解决方案1】：

似乎您必须对应该提供模拟值并将其传递给效应器提供程序的范围进行水合。如果您尝试以下操作，它应该会很好地工作：

import { Provider } from 'effector-react/ssr';
import { fork, hydrate, root } from 'effector-root';
import { render } from '@testing-library/react';
import { $store } from './store' 


const Wrapper = ({ children }: Record<any, any>) => (
  <Provider value={scope}>{children}</Provider>
);

it('Test', async () => {
   const scope = fork(root)

   hydrate(scope, {
      values: [
        [
          $store,
          'value',
        ],
      ],
    });

    const { getByTestId } = render(<TestableComponent />, {
      wrapper: Wrapper,
    });
})

【讨论】：