testing custom hook within a component scope throws TypeError not a function

[AhmedSarhanSwvl]

when I run my unit tests to test componernts, I recieve errors similar to this one in multiple places: TypeError: (0 , _fileName.useCustomHook) is not a function when I test the hook itself alone it works fine, but I don't want to test the hook I want to test the component and the component have data that depends on my custom hook

Notes:

• this was working last week with no errors and I didn't edit any code
• I have looked at the packages nothing was updated since then
• the codebase is Next.js so we can't update RTL to v13 yet as we have React v17 and the dep. tree won't fit together so we have @testing-library/react": "^12.1.2 and @testing-library/react-hooks: "^8.0.1",
• I have updated RTL to 12.1.5 which is the latest version of v12 but same error can someone please help with this?

[joshuaellis]

Sorry, i think i'm maybe missing something. If you're trying to test a component with RTL, why are you posting this question in RHTL? 😄 Secondly, can you share your test code & component please?

[AhmedSarhanSwvl]

I'm sorry my bad didn't realize this was RHTL as for the code this is the hook it self and I'm using RQ

export const useEmployees = ({ page = 1, limit = 10, shiftId, date, runId, isExcluded = false }: QueryParams) => {
  const { selectedCorporateId } = useCustomers();
  const corporateId = selectedCorporateId ?? '';
  return useQuery(
    ['employees', shiftId, runId, [page, limit, date, isExcluded]],
    () => fetchEmployees({ shiftId, runId, page, limit, date, corporateId, isExcluded }),
    {
      enabled: (!!runId || !!shiftId) && !!corporateId,
    },
  );
};

then in another context provider

export const ContextProvider: React.FunctionComponent = ({ children }) => {
const { data: excludedEmployees } = useEmployees({
    runId: runId as string,
    isExcluded: true,
    limit: 1000,
    page: null,
  });
....rest of the context code
};

In the test

it('renders correctly', async () => {
   // this custom render is the render with wrapper option being our common providers like QueryClientProvider from RQ
    customRender(
      // I don't need this provider in all of my cases so added it here
     // I need this provider here as I'm using it's context api within the componet code
      <ContextProvider>
        <Component startTime={startTime} />
      </ContextProvider>,
    );
    const labelTxt = screen.getByText(/start time/i);
    expect(labelTxt).toBeInTheDocument();
  });

[malithmcr]

@AhmedSarhanSwvl were you able to fix this?

[houmankamali-Zipline]

I had a similar issue - the problem was that in my jest config I had a poorly defined moduleNameMapper that was swapping the imported file with a mock