Skip to content

Commit

Permalink
Update all React tests to use async instead of done callbacks
Browse files Browse the repository at this point in the history 
This, along with using `@testing-library/react`'s `wait` function,
 gets rid of all React "you must use act()" warnings.
  • Loading branch information
@hwillson
hwillson committed Sep 17, 2019
1 parent 2418a46 commit 5a102b2
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 58 deletions.
33 changes: 23 additions & 10 deletions src/react/hooks/__tests__/useMutation.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ describe('useMutation Hook', () => {
afterEach(cleanup);

describe('General use', () => {
it('should handle a simple mutation properly', done => {
it('should handle a simple mutation properly', async () => {
const variables = {
description: 'Get milk!'
};
Expand Down Expand Up @@ -71,7 +71,6 @@ describe('useMutation Hook', () => {
case 2:
expect(loading).toBeFalsy();
expect(data).toEqual(CREATE_TODO_RESULT);
done();
break;
default:
}
Expand All @@ -84,9 +83,13 @@ describe('useMutation Hook', () => {
<Component />
</MockedProvider>
);

await wait(() => {
expect(renderCount).toBe(3);
});
});

it('should be able to call mutations as an effect', done => {
it('should be able to call mutations as an effect', async () => {
const variables = {
description: 'Get milk!'
};
Expand Down Expand Up @@ -123,7 +126,6 @@ describe('useMutation Hook', () => {
case 2:
expect(loading).toBeFalsy();
expect(data).toEqual(CREATE_TODO_RESULT);
done();
break;
default:
}
Expand All @@ -141,9 +143,13 @@ describe('useMutation Hook', () => {
<Component />
</MockedProvider>
);

await wait(() => {
expect(renderCount).toBe(3);
});
});

it('should ensure the mutation callback function has a stable identity', done => {
it('should ensure the mutation callback function has a stable identity', async () => {
const variables = {
description: 'Get milk!'
};
Expand Down Expand Up @@ -181,7 +187,6 @@ describe('useMutation Hook', () => {
case 2:
expect(loading).toBeFalsy();
expect(data).toEqual(CREATE_TODO_RESULT);
done();
break;
default:
}
Expand All @@ -194,9 +199,13 @@ describe('useMutation Hook', () => {
<Component />
</MockedProvider>
);

await wait(() => {
expect(renderCount).toBe(3);
});
});

it('should resolve mutate function promise with mutation results', done => {
it('should resolve mutate function promise with mutation results', async () => {
const variables = {
description: 'Get milk!'
};
Expand All @@ -222,7 +231,6 @@ describe('useMutation Hook', () => {
expect(data!.createTodo.description).toEqual(
CREATE_TODO_RESULT.createTodo.description
);
done();
}

useEffect(() => {
Expand All @@ -237,6 +245,8 @@ describe('useMutation Hook', () => {
<Component />
</MockedProvider>
);

await wait();
});

it('should return the current client instance in the result object', async () => {
Expand All @@ -258,7 +268,7 @@ describe('useMutation Hook', () => {
});

describe('Optimistic response', () => {
it('should support optimistic response handling', done => {
it('should support optimistic response handling', async () => {
const optimisticResponse = {
__typename: 'Mutation',
createTodo: {
Expand Down Expand Up @@ -316,7 +326,6 @@ describe('useMutation Hook', () => {
case 2:
expect(loading).toBeFalsy();
expect(data).toEqual(CREATE_TODO_RESULT);
done();
break;
default:
}
Expand All @@ -329,6 +338,10 @@ describe('useMutation Hook', () => {
<Component />
</ApolloProvider>
);

await wait(() => {
expect(renderCount).toBe(3);
});
});
});
});
65 changes: 36 additions & 29 deletions src/react/hooks/__tests__/useQuery.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,11 @@ describe('useQuery Hook', () => {
afterEach(cleanup);

describe('General use', () => {
it('should handle a simple query properly', done => {
it('should handle a simple query properly', async () => {
const Component = () => {
const { data, loading } = useQuery(CAR_QUERY);
if (!loading) {
expect(data).toEqual(CAR_RESULT_DATA);
done();
}
return null;
};
Expand All @@ -59,16 +58,17 @@ describe('useQuery Hook', () => {
<Component />
</MockedProvider>
);

await wait();
});

it('should keep data as undefined until data is actually returned', done => {
it('should keep data as undefined until data is actually returned', async () => {
const Component = () => {
const { data, loading } = useQuery(CAR_QUERY);
if (loading) {
expect(data).toBeUndefined();
} else {
expect(data).toEqual(CAR_RESULT_DATA);
done();
}
return null;
};
Expand All @@ -78,6 +78,8 @@ describe('useQuery Hook', () => {
<Component />
</MockedProvider>
);

await wait();
});

it('should ensure ObservableQuery fields have a stable identity', async () => {
Expand Down Expand Up @@ -126,7 +128,7 @@ describe('useQuery Hook', () => {
});

describe('Polling', () => {
it('should support polling', done => {
it('should support polling', async () => {
let renderCount = 0;
const Component = () => {
let { data, loading, stopPolling } = useQuery(CAR_QUERY, {
Expand All @@ -144,13 +146,9 @@ describe('useQuery Hook', () => {
expect(loading).toBeFalsy();
expect(data).toEqual(CAR_RESULT_DATA);
stopPolling();
setTimeout(() => {
done();
}, 10);
break;
case 3:
done.fail('Uh oh - we should have stopped polling!');
break;
throw new Error('Uh oh - we should have stopped polling!');
default:
// Do nothing
}
Expand All @@ -163,9 +161,13 @@ describe('useQuery Hook', () => {
<Component />
</MockedProvider>
);

await wait(() => {
expect(renderCount).toBe(3);
});
});

it('should stop polling when skip is true', done => {
it('should stop polling when skip is true', async () => {
let renderCount = 0;
const Component = () => {
const [shouldSkip, setShouldSkip] = useState(false);
Expand All @@ -190,13 +192,9 @@ describe('useQuery Hook', () => {
case 3:
expect(loading).toBeFalsy();
expect(data).toBeUndefined();
setTimeout(() => {
done();
}, 10);
break;
case 4:
done.fail('Uh oh - we should have stopped polling!');
break;
throw new Error('Uh oh - we should have stopped polling!');
default:
// Do nothing
}
Expand All @@ -209,9 +207,13 @@ describe('useQuery Hook', () => {
<Component />
</MockedProvider>
);

await wait(() => {
expect(renderCount).toBe(4);
});
});

it('should stop polling when the component is unmounted', done => {
it('should stop polling when the component is unmounted', async () => {
const mockLink = new MockLink(CAR_MOCKS);
const linkRequestSpy = jest.spyOn(mockLink, 'request');
let renderCount = 0;
Expand Down Expand Up @@ -241,11 +243,6 @@ describe('useQuery Hook', () => {
const Component = () => {
const [queryMounted, setQueryMounted] = useState(true);
const unmount = () => setTimeout(() => setQueryMounted(false), 0);
if (!queryMounted)
setTimeout(() => {
expect(linkRequestSpy).toHaveBeenCalledTimes(2);
done();
}, 30);
return <>{queryMounted && <QueryComponent unmount={unmount} />}</>;
};

Expand All @@ -254,6 +251,10 @@ describe('useQuery Hook', () => {
<Component />
</MockedProvider>
);

await wait(() => {
expect(linkRequestSpy).toHaveBeenCalledTimes(2);
})
});

it(
Expand Down Expand Up @@ -314,7 +315,7 @@ describe('useQuery Hook', () => {
});

describe('Error handling', () => {
it("should render GraphQLError's", done => {
it("should render GraphQLError's", async () => {
const query = gql`
query TestQuery {
rates(currency: "USD") {
Expand All @@ -337,7 +338,6 @@ describe('useQuery Hook', () => {
if (!loading) {
expect(error).toBeDefined();
expect(error!.message).toEqual('GraphQL error: forced error');
done();
}
return null;
};
Expand All @@ -347,9 +347,11 @@ describe('useQuery Hook', () => {
<Component />
</MockedProvider>
);

await wait();
});

it('should only call onError callbacks once', done => {
it('should only call onError callbacks once', async () => {
const query = gql`
query SomeQuery {
stuff {
Expand Down Expand Up @@ -408,7 +410,6 @@ describe('useQuery Hook', () => {
case 3:
expect(loading).toBeFalsy();
expect(data).toEqual(resultData);
done();
break;
default: // Do nothing
}
Expand All @@ -422,9 +423,13 @@ describe('useQuery Hook', () => {
<Component />
</ApolloProvider>
);

await wait(() => {
expect(renderCount).toBe(4);
});
});

it('should persist errors on re-render if they are still valid', done => {
it('should persist errors on re-render if they are still valid', async () => {
const query = gql`
query SomeQuery {
stuff {
Expand Down Expand Up @@ -462,7 +467,6 @@ describe('useQuery Hook', () => {
case 2:
expect(error).toBeDefined();
expect(error!.message).toEqual('GraphQL error: forced error');
done();
break;
default: // Do nothing
}
Expand All @@ -476,6 +480,10 @@ describe('useQuery Hook', () => {
<App />
</MockedProvider>
);

await wait(() => {
expect(renderCount).toBe(3);
});
});

it(
Expand Down Expand Up @@ -1091,7 +1099,6 @@ describe('useQuery Hook', () => {
onCompleted(data) {
onCompletedCalled = true;
expect(data).toBeDefined();
console.log(data);
}
});
if (!loading) {
Expand Down
Loading

0 comments on commit 5a102b2

Please sign in to comment.