Effector: ".use argument should be a function" on attach

Question

effector throws error ".use argument should be a function" at getCurrent (node_modules/effector/effector/region.ts:27:5) on attach method while testing.

I'm trying integration testing with mocking of some initial state.

//babel config
module.exports = (api) => {
  if (api.env('test')) {
    config.plugins.push([
      'module-resolver',
      {
        root: ['.'],
        alias: {
          effector-react: 'effector-react/scope',
        },
      },
    ]);
  }
  return config;
};

//store.ts
export const getUsersFx = attach({
  effect: getUsersOriginalFx,
  source: [$clientId],
  mapParams: (_, [clientId]) => ({
    clientId
  }),
});

//component.tsx
import { render } from '@testing-library/react';
import { Provider } from 'effector-react/scope'

describe('TestableComponent', () => {
  test('should increment counter after click', () => {
    const scope = fork()

    const rendered = render(
      <Provider value={scope}>
        <TestableComponent />
      </Provider>
    );
  })
})

I think the reason is that Effector mocks Effect and under the hood uses .use for effect callback mock. But then it change it to null or undefined and Effector throws error that fn in .use(fn) must be function

Effector mocks getUsersFx => getUsersFx.use(mockFn <- it's undefined i think).

Effector version: 22

Answer 1

Looks like the reason is multiple passes of effector/babel-plugin which you using for tests - error with attach is similiar: https://github.com/effector/effector/issues/601

Multiple passes of babel-plugin will be supported in the next minor release of effector - for now you can check your babel configuration for duplicated usage of effector/babel-plugin