Testing (React, Next.js, React-Query... literally that's it) :(

[jolly cargo]

CC: @low urchin

[low urchin]

Let me know if this sounds like BS since I am just looking at the source. Here's what I think what's happening:
I think you need to disable mocking for the loading test. fetchMock is always mocking the request portion of the flow happening somewhere inside useQuery, not useQuery hook itself, which it appears you are trying to mock in that specific test. That means the request is always being completed in your test and never "loading: true". I think by disabling the mock the request will be stuck waiting for the response and as a result, staying loading: true.

[jolly cargo]

I have no idea how to test so you know more than me
here's what I know:

it("renders three loading clerks when status is loading", async () => {
  fetchMock.mockResponseOnce(
    JSON.stringify({
      page: 1,
      apiMocks,
    })
  );

  const { result } = renderHook(() => useClerks(1), {
    wrapper,
  });

  const { status, data } = result.current;

  expect(status).toBe("loading");
  expect(data).toBeFalsy();
});

there is a loading state if you catch it at the right time. this test passes ^^ and i've tested against status.toBe("success") and it fails and says expected success to be loading, so it for sure is catching the loading state

i tried this,

it("renders three loading clerks when status is loading", async () => {
  fetchMock.mockImplementation({ isLoading: true });

  const clerks = render(wrapper(<Clerks />));

  expect(clerks.findByTestId("loadingClerks")).toBeTruthy();
  // should fail because clerkContainer should only appear if isLoading is false.
  expect(clerks.findByTestId("clerkContainer")).toBeTruthy();
});

but it passes both cases.. when clerkContainer should only be rendered if (isLoading) is not true.
https://prnt.sc/8w-eU446l4Zt
this is in the Clerks.tsx file ^^^ where it should be error, loading, or have data

i literally started learning about testing about two days ago - and i clearly know nothing

[low urchin]

NP, testing is usually the hardest part IMO because of some many moving pieces you have to know about.

If you switch fetchMock.mockImplementation({ isLoading: true }); to fetchMock.dontMockOnce(). What happens?

I can also hop on a video chat if it will help.

[jolly cargo]

i deleted it all i got so upset

and now i'm even more upset bc i actually needed to track those commits lmaoooo

[low urchin]

Ahhh rage quit, I understand that, but mocking requests is one of the most challenging parts of doing JS/TS tests. Sometimes I get tripped up because I didn't mock things properly and the programmers I mentor 100% get stuck on it all the time. It's one of those things you learn by doing since you have to know how to write the tests and understand the tools you are using enough to mock them.

[jolly cargo]

have you tested a component that gets data from a fetch thru react-query?

[low urchin]

Yep, I have experience, but most of my time, I am working with apollo gql library and mocking requests using their verbose style.

[jolly cargo]

:/ i think i'm just going to have to turn in my assignment like this then
testing isn't it for me rn

i'm deleting this thread at the end of the day

thank you anyways !! @low urchin