1 year ago

#388797

test-img

Gabrielle

Issues with mock + multiple exports in the same file on react-testing-library

I am using Jest + React Testing Library in my project, and in one of my components, I have a common index.ts that exports all the internal components like:

src/components/commonComponents/index.ts:

import A, { IAProps as AType } from './components/A';
import B, { IBProps as BType } from './components/B';
import { C, commonFunc } from './components/Shared';

export type IAProps = AType;
export type IBProps = BType;

export { A, B, C, commonFunc };

And I have a component making use of that like:

src/mainComponent:

import { A, commonFunc } from 'components/commonComponents';

I am trying to test mainComponent, as can be seen on top, I need to import 2 of the components being exported in the same index.

I mocked all redux selectors so that, I wouldn't have issues with it. But for some reason the import on top, makes react-testing-library to give me an error on redux (a-if I missed mocking a function) on component B that I am not using anywhere and therefore also not mocking anything for that. But if I changed the above import to something like:

import A from 'components/commonComponents/components/A';
import { commonFunc } from 'components/commonComponents/components/Shared';

I don't get the error anymore...

Any idea what can I do? I can't change all my components to be imported directly from each main file since sometimes I wrap my component with HOC in the index, and they will be needed in future tests...

reactjs

unit-testing

jestjs

react-testing-library

react-testing

0 Answers

Your Answer

Accepted video resources