diff --git a/packages/react-query/src/__tests__/useMutation.test.tsx b/packages/react-query/src/__tests__/useMutation.test.tsx index aea6bb7c52..4f3fdf5ccd 100644 --- a/packages/react-query/src/__tests__/useMutation.test.tsx +++ b/packages/react-query/src/__tests__/useMutation.test.tsx @@ -55,15 +55,13 @@ describe('useMutation', () => { fireEvent.click(getByRole('button', { name: /mutate/i })) - await vi.waitFor(() => { - expect(getByRole('heading').textContent).toBe('mutation') - }) + await vi.advanceTimersByTimeAsync(0) + expect(getByRole('heading').textContent).toBe('mutation') fireEvent.click(getByRole('button', { name: /reset/i })) - await vi.waitFor(() => { - expect(getByRole('heading').textContent).toBe('empty') - }) + await vi.advanceTimersByTimeAsync(0) + expect(getByRole('heading').textContent).toBe('empty') }) it('should be able to reset `error`', async () => { @@ -87,23 +85,19 @@ describe('useMutation', () => { const { getByRole, queryByRole } = renderWithClient(queryClient, ) - await vi.waitFor(() => { - expect(queryByRole('heading')).toBeNull() - }) + expect(queryByRole('heading')).toBeNull() fireEvent.click(getByRole('button', { name: /mutate/i })) - await vi.waitFor(() => { - expect(getByRole('heading').textContent).toBe( - 'Expected mock error. All is well!', - ) - }) + await vi.advanceTimersByTimeAsync(0) + expect(getByRole('heading').textContent).toBe( + 'Expected mock error. All is well!', + ) fireEvent.click(getByRole('button', { name: /reset/i })) - await vi.waitFor(() => { - expect(queryByRole('heading')).toBeNull() - }) + await vi.advanceTimersByTimeAsync(0) + expect(queryByRole('heading')).toBeNull() }) it('should be able to call `onSuccess` and `onSettled` after each successful mutate', async () => { @@ -139,21 +133,15 @@ describe('useMutation', () => { fireEvent.click(getByRole('button', { name: /mutate/i })) fireEvent.click(getByRole('button', { name: /mutate/i })) - await vi.waitFor(() => { - expect(getByRole('heading').textContent).toBe('3') - }) - - await vi.waitFor(() => { - expect(onSuccessMock).toHaveBeenCalledTimes(3) - }) + await vi.advanceTimersByTimeAsync(0) + expect(getByRole('heading').textContent).toBe('3') + expect(onSuccessMock).toHaveBeenCalledTimes(3) expect(onSuccessMock).toHaveBeenCalledWith(1) expect(onSuccessMock).toHaveBeenCalledWith(2) expect(onSuccessMock).toHaveBeenCalledWith(3) - await vi.waitFor(() => { - expect(onSettledMock).toHaveBeenCalledTimes(3) - }) + expect(onSettledMock).toHaveBeenCalledTimes(3) expect(onSettledMock).toHaveBeenCalledWith(1) expect(onSettledMock).toHaveBeenCalledWith(2) @@ -193,42 +181,25 @@ describe('useMutation', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => - expect(rendered.getByText('Data')).toBeInTheDocument(), - ) + expect(rendered.getByText('Data')).toBeInTheDocument() fireEvent.click(rendered.getByRole('button', { name: /mutate/i })) - await vi.waitFor(() => - expect(rendered.getByText('Data')).toBeInTheDocument(), - ) - await vi.waitFor(() => - expect(rendered.getByText('Status error')).toBeInTheDocument(), - ) - await vi.waitFor(() => - expect(rendered.getByText('Failed 1 times')).toBeInTheDocument(), - ) - await vi.waitFor(() => - expect( - rendered.getByText('Failed because Error test Jonas'), - ).toBeInTheDocument(), - ) + + await vi.advanceTimersByTimeAsync(0) + expect(rendered.getByText('Status error')).toBeInTheDocument() + expect(rendered.getByText('Failed 1 times')).toBeInTheDocument() + expect( + rendered.getByText('Failed because Error test Jonas'), + ).toBeInTheDocument() fireEvent.click(rendered.getByRole('button', { name: /mutate/i })) - await vi.waitFor(() => - expect(rendered.getByText('Status pending')).toBeInTheDocument(), - ) - await vi.waitFor(() => - expect(rendered.getByText('Status success')).toBeInTheDocument(), - ) - await vi.waitFor(() => - expect(rendered.getByText('Data 2')).toBeInTheDocument(), - ) - await vi.waitFor(() => - expect(rendered.getByText('Failed 0 times')).toBeInTheDocument(), - ) - await vi.waitFor(() => - expect(rendered.getByText('Failed because null')).toBeInTheDocument(), - ) + await vi.advanceTimersByTimeAsync(0) + expect(rendered.getByText('Status pending')).toBeInTheDocument() + await vi.advanceTimersByTimeAsync(11) + expect(rendered.getByText('Status success')).toBeInTheDocument() + expect(rendered.getByText('Data 2')).toBeInTheDocument() + expect(rendered.getByText('Failed 0 times')).toBeInTheDocument() + expect(rendered.getByText('Failed because null')).toBeInTheDocument() }) it('should be able to call `onError` and `onSettled` after each failed mutate', async () => { @@ -269,13 +240,9 @@ describe('useMutation', () => { fireEvent.click(getByRole('button', { name: /mutate/i })) fireEvent.click(getByRole('button', { name: /mutate/i })) - await vi.waitFor(() => { - expect(getByRole('heading').textContent).toBe('3') - }) - - await vi.waitFor(() => { - expect(onErrorMock).toHaveBeenCalledTimes(3) - }) + await vi.advanceTimersByTimeAsync(0) + expect(getByRole('heading').textContent).toBe('3') + expect(onErrorMock).toHaveBeenCalledTimes(3) expect(onErrorMock).toHaveBeenCalledWith( 'Expected mock error. All is well! 1', ) @@ -286,9 +253,7 @@ describe('useMutation', () => { 'Expected mock error. All is well! 3', ) - await vi.waitFor(() => { - expect(onSettledMock).toHaveBeenCalledTimes(3) - }) + expect(onSettledMock).toHaveBeenCalledTimes(3) expect(onSettledMock).toHaveBeenCalledWith( 'Expected mock error. All is well! 1', ) @@ -497,30 +462,26 @@ describe('useMutation', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => { - expect( - rendered.getByText('error: null, status: idle, isPaused: false'), - ).toBeInTheDocument() - }) + expect( + rendered.getByText('error: null, status: idle, isPaused: false'), + ).toBeInTheDocument() fireEvent.click(rendered.getByRole('button', { name: /mutate/i })) - await vi.waitFor(() => { - expect( - rendered.getByText('error: null, status: pending, isPaused: true'), - ).toBeInTheDocument() - }) + await vi.advanceTimersByTimeAsync(0) + expect( + rendered.getByText('error: null, status: pending, isPaused: true'), + ).toBeInTheDocument() expect(count).toBe(0) onlineMock.mockReturnValue(true) queryClient.getMutationCache().resumePausedMutations() - await vi.waitFor(() => { - expect( - rendered.getByText('error: oops, status: error, isPaused: false'), - ).toBeInTheDocument() - }) + await vi.advanceTimersByTimeAsync(6) + expect( + rendered.getByText('error: oops, status: error, isPaused: false'), + ).toBeInTheDocument() expect(count).toBe(2) onlineMock.mockRestore() @@ -554,23 +515,20 @@ describe('useMutation', () => { const rendered = renderWithClient(queryClient, ) - rendered.findByText('data: null, status: idle, isPaused: false') + rendered.getByText('data: null, status: idle, isPaused: false') fireEvent.click(rendered.getByRole('button', { name: /mutate/i })) - await vi.waitFor(() => - rendered.findByText('data: null, status: pending, isPaused: true'), - ) + await vi.advanceTimersByTimeAsync(0) + rendered.getByText('data: null, status: pending, isPaused: true') expect(onMutate).toHaveBeenCalledTimes(1) expect(onMutate).toHaveBeenCalledWith('todo') onlineMock.mockReturnValue(true) queryClient.getMutationCache().resumePausedMutations() - - await vi.waitFor(() => - rendered.findByText('data: 1, status: success, isPaused: false'), - ) + await vi.advanceTimersByTimeAsync(11) + rendered.getByText('data: 1, status: success, isPaused: false') expect(onMutate).toHaveBeenCalledTimes(1) expect(count).toBe(1) @@ -607,15 +565,12 @@ describe('useMutation', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => - rendered.findByText('data: null, status: idle, isPaused: false'), - ) + rendered.getByText('data: null, status: idle, isPaused: false') fireEvent.click(rendered.getByRole('button', { name: /mutate/i })) - await vi.waitFor(() => - rendered.findByText('data: null, status: pending, isPaused: true'), - ) + await vi.advanceTimersByTimeAsync(0) + rendered.getByText('data: null, status: pending, isPaused: true') // no intermediate 'pending, false' state is expected because we don't start mutating! expect(states[0]).toBe('idle, false') @@ -624,9 +579,8 @@ describe('useMutation', () => { onlineMock.mockReturnValue(true) queryClient.getMutationCache().resumePausedMutations() - await vi.waitFor(() => - rendered.findByText('data: 1, status: success, isPaused: false'), - ) + await vi.advanceTimersByTimeAsync(11) + rendered.getByText('data: 1, status: success, isPaused: false') onlineMock.mockRestore() }) @@ -664,9 +618,10 @@ describe('useMutation', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('status: idle')) + rendered.getByText('status: idle') fireEvent.click(rendered.getByRole('button', { name: /mutate/i })) - await vi.waitFor(() => rendered.getByText('isPaused: true')) + await vi.advanceTimersByTimeAsync(16) + rendered.getByText('isPaused: true') expect( queryClient.getMutationCache().findAll({ mutationKey: key }).length, @@ -683,7 +638,8 @@ describe('useMutation', () => { onlineMock.mockReturnValue(true) queryClient.getMutationCache().resumePausedMutations() - await vi.waitFor(() => rendered.getByText('data: data2')) + await vi.advanceTimersByTimeAsync(11) + rendered.getByText('data: data2') expect( queryClient.getMutationCache().findAll({ mutationKey: key })[0]?.state, @@ -756,9 +712,8 @@ describe('useMutation', () => { fireEvent.click(getByText('mutate')) - await vi.waitFor(() => { - expect(queryByText('error')).not.toBeNull() - }) + await vi.advanceTimersByTimeAsync(0) + expect(queryByText('error')).not.toBeNull() expect(consoleMock.mock.calls[0]?.[1]).toBe(err) @@ -805,16 +760,14 @@ describe('useMutation', () => { // first error goes to component fireEvent.click(getByText('mutate')) - await vi.waitFor(() => { - expect(queryByText('mock error')).not.toBeNull() - }) + await vi.advanceTimersByTimeAsync(0) + expect(queryByText('mock error')).not.toBeNull() // second error goes to boundary boundary = true fireEvent.click(getByText('mutate')) - await vi.waitFor(() => { - expect(queryByText('error boundary')).not.toBeNull() - }) + await vi.advanceTimersByTimeAsync(0) + expect(queryByText('error boundary')).not.toBeNull() consoleMock.mockRestore() }) @@ -866,10 +819,9 @@ describe('useMutation', () => { fireEvent.click(getByText('succeed')) fireEvent.click(getByText('error')) - await vi.waitFor(() => { - expect(queryByText('successTest')).not.toBeNull() - expect(queryByText('errorTest')).not.toBeNull() - }) + await vi.advanceTimersByTimeAsync(0) + expect(queryByText('successTest')).not.toBeNull() + expect(queryByText('errorTest')).not.toBeNull() expect(successMock).toHaveBeenCalledTimes(1) expect(successMock).toHaveBeenCalledWith(metaSuccessMessage) @@ -930,18 +882,14 @@ describe('useMutation', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => - rendered.findByText('data: null, status: idle, isPaused: false'), - ) - + rendered.getByText('data: null, status: idle, isPaused: false') fireEvent.click(rendered.getByRole('button', { name: /mutate/i })) fireEvent.click(rendered.getByRole('button', { name: /hide/i })) - await vi.waitFor(() => { - expect( - queryClient.getMutationCache().findAll({ mutationKey }), - ).toHaveLength(0) - }) + await vi.advanceTimersByTimeAsync(11) + expect( + queryClient.getMutationCache().findAll({ mutationKey }), + ).toHaveLength(0) expect(count).toBe(1) @@ -1001,14 +949,13 @@ describe('useMutation', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.findByText('data: null, status: idle')) + rendered.getByText('data: null, status: idle') fireEvent.click(rendered.getByRole('button', { name: /mutate1/i })) fireEvent.click(rendered.getByRole('button', { name: /mutate2/i })) - await vi.waitFor(() => - rendered.findByText('data: result-todo2, status: success'), - ) + await vi.advanceTimersByTimeAsync(11) + rendered.getByText('data: result-todo2, status: success') expect(count).toBe(2) @@ -1065,11 +1012,12 @@ describe('useMutation', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.findByText('status: idle')) + rendered.getByText('status: idle') rendered.getByRole('button', { name: /mutate/i }).click() - await vi.waitFor(() => rendered.findByText('status: error')) + await vi.advanceTimersByTimeAsync(11) + rendered.getByText('status: error') expect(onError).toHaveBeenCalledWith(error, 'todo', undefined) }) @@ -1101,19 +1049,14 @@ describe('useMutation', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => - expect( - rendered.getByText('error: null, status: idle'), - ).toBeInTheDocument(), - ) + expect(rendered.getByText('error: null, status: idle')).toBeInTheDocument() rendered.getByRole('button', { name: /mutate/i }).click() - await vi.waitFor(() => - expect( - rendered.getByText('error: mutateFnError, status: error'), - ).toBeInTheDocument(), - ) + await vi.advanceTimersByTimeAsync(11) + expect( + rendered.getByText('error: mutateFnError, status: error'), + ).toBeInTheDocument() }) it('should go to error state if onSettled callback errors', async () => { @@ -1145,14 +1088,12 @@ describe('useMutation', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.findByText('error: null, status: idle')) + rendered.getByText('error: null, status: idle') rendered.getByRole('button', { name: /mutate/i }).click() - await vi.waitFor(() => - rendered.findByText('error: mutateFnError, status: error'), - ) - + await vi.advanceTimersByTimeAsync(11) + rendered.getByText('error: mutateFnError, status: error') expect(onError).toHaveBeenCalledWith(mutateFnError, 'todo', undefined) }) @@ -1181,18 +1122,13 @@ describe('useMutation', () => { const rendered = render() - await vi.waitFor(() => - expect( - rendered.getByText('data: null, status: idle'), - ).toBeInTheDocument(), - ) + expect(rendered.getByText('data: null, status: idle')).toBeInTheDocument() fireEvent.click(rendered.getByRole('button', { name: /mutate/i })) - await vi.waitFor(() => - expect( - rendered.getByText('data: custom client, status: success'), - ).toBeInTheDocument(), - ) + await vi.advanceTimersByTimeAsync(0) + expect( + rendered.getByText('data: custom client, status: success'), + ).toBeInTheDocument() }) })