Skip to content

Commit

Permalink
docs: Update testing.md (#5652)
Browse files Browse the repository at this point in the history
Set JS as lang for syntax highlighting.
Previously defaulted to bash
  • Loading branch information
AndreasVolkmann committed Jul 15, 2023
1 parent baf722f commit a6436d8
Showing 1 changed file with 8 additions and 8 deletions.
16 changes: 8 additions & 8 deletions docs/react/guides/testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@ 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');
}
```

We can write a test for this as follows:

```
```js
const queryClient = new QueryClient();
const wrapper = ({ children }) => (
<QueryClientProvider client={queryClient}>
Expand All @@ -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: {
Expand Down Expand Up @@ -97,15 +97,15 @@ 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'));
}
```

We can write a test for this as follows:

```
```js
const queryClient = new QueryClient();
const wrapper = ({ children }) => (
<QueryClientProvider client={queryClient}>
Expand Down Expand Up @@ -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,
Expand All @@ -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)
Expand All @@ -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);
Expand Down

0 comments on commit a6436d8

Please sign in to comment.