How to test React components using React Testing Library and Effector (state manager)

Question

I'm using effector and React Testing Library (RTL). In the doc of RTL there is article about customerRender where we pass AllTheProviders as a wrapper of the render function.

Question: how to do the same with effector (couldn't find Provider there)? And how to mock store(s) since there could be more than one (value for Provider)?

In the end I wanted just to use render(<Component />) without passing any extra data, as doc shows.

Answer 1

It seems like you have to hydrate a scope that should provide your mocked values and pass it into effector provider. It should work well if you'll try something like following:

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,
    });
})