From a6436d828c6d5d585474452a8291c6ae45954993 Mon Sep 17 00:00:00 2001 From: Andreas Volkmann Date: Sat, 15 Jul 2023 01:08:36 -0700 Subject: [PATCH] docs: Update testing.md (#5652) Set JS as lang for syntax highlighting. Previously defaulted to bash --- docs/react/guides/testing.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/react/guides/testing.md b/docs/react/guides/testing.md index f4c3d89e08..388a00b606 100644 --- a/docs/react/guides/testing.md +++ b/docs/react/guides/testing.md @@ -19,7 +19,7 @@ npm install @testing-library/react-hooks react-test-renderer --save-dev Once installed, a simple test can be written. Given the following custom hook: -``` +```js export function useCustomHook() { return useQuery('customHook', () => 'Hello'); } @@ -27,7 +27,7 @@ export function useCustomHook() { We can write a test for this as follows: -``` +```js const queryClient = new QueryClient(); const wrapper = ({ children }) => ( @@ -50,7 +50,7 @@ It is possible to write this wrapper only once, but if so we need to ensure that The library defaults to three retries with exponential backoff, which means that your tests are likely to timeout if you want to test an erroneous query. The easiest way to turn retries off is via the QueryClientProvider. Let's extend the above example: -``` +```js const queryClient = new QueryClient({ defaultOptions: { queries: { @@ -97,7 +97,7 @@ There are plenty of ways that these can be tested, but for this example we are g Given the following custom hook: -``` +```js function useFetchData() { return useQuery('fetchData', () => request('/api/data')); } @@ -105,7 +105,7 @@ function useFetchData() { We can write a test for this as follows: -``` +```js const queryClient = new QueryClient(); const wrapper = ({ children }) => ( @@ -134,7 +134,7 @@ Here we are making use of `waitFor` and waiting until the query status indicates First we need to mock our API response -``` +```js function generateMockedResponse(page) { return { page: page, @@ -146,7 +146,7 @@ function generateMockedResponse(page) { Then, our `nock` configuration needs to differentiate responses based on the page, and we'll be using `uri` to do this. `uri`'s value here will be something like `"/?page=1` or `/?page=2` -``` +```js const expectation = nock('http://example.com') .persist() .query(true) @@ -162,7 +162,7 @@ const expectation = nock('http://example.com') Now we can safely run our tests, the trick here is to await both `isFetching` and then `!isFetching` after calling `fetchNextPage()`: -``` +```js const { result, waitFor } = renderHook(() => useInfiniteQueryCustomHook(), { wrapper }); await waitFor(() => result.current.isSuccess);