Skip to content

Commit aa2618e

Browse files
skybenedettofskybenedettof
committed
Remove @testing-library/react-hooks dependency. Update tests suite by using the new renderHook API
1 parent ee165bf commit aa2618e

11 files changed

+69
-84
lines changed

‎package.json

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@
2222
"@testing-library/jest-dom": "^5.14.1",
2323
"@testing-library/react": "^13.1.1",
2424
"@testing-library/react-12": "npm:@testing-library/react@^12.1.2",
25-
"@testing-library/react-hooks": "^7.0.2",
2625
"@types/jest": "^27.0.2",
2726
"@types/react": "^18.0.0",
2827
"@types/react-dom": "^18.0.0",
@@ -47,7 +46,6 @@
4746
"react-dom": "^18.0.0",
4847
"react-dom-17": "npm:react-dom@^17.0.2",
4948
"react-fast-compare": "^3.2.0",
50-
"react-hooks-testing-library": "^0.6.0",
5149
"release-it": "^14.11.6",
5250
"shelljs": "^0.8.4",
5351
"shx": "^0.3.3",

‎src/__tests__/http-client-config-provider.spec.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { cleanup } from '@testing-library/react';
2-
import { renderHook } from '@testing-library/react-hooks';
1+
import { cleanup, renderHook } from '@testing-library/react';
32
import { FetchMock } from 'jest-fetch-mock';
43
import { mock } from 'jest-mock-extended';
54
import { defaultHttpReqConfig, HttpCacheStore, HttpMethod, useHttpClient } from '..';

‎src/__tests__/use-http-client.spec.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { cleanup } from '@testing-library/react';
2-
import { renderHook } from '@testing-library/react-hooks';
1+
import { cleanup, renderHook } from '@testing-library/react';
32
import { FetchMock } from 'jest-fetch-mock';
43
import {
54
defaultHttpReqConfig,

‎src/__tests__/use-http-delete.spec.ts

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { renderHook } from '@testing-library/react-hooks';
1+
import { waitFor, renderHook } from '@testing-library/react';
22
import { HttpMethod, useHttpDelete } from '..';
33
import * as useHttpRequestModule from '../request/use-http-request';
44
import { HttpClientProviderConfigFixture } from './fixtures/http-client-config-provider.fixture';
@@ -7,7 +7,7 @@ describe('use-http-post', () => {
77
it('should perform a post request', async () => {
88
const useHttpRequestMock = jest.spyOn(useHttpRequestModule, 'useHttpRequest');
99

10-
const { waitForNextUpdate } = renderHook(
10+
const { result } = renderHook(
1111
() =>
1212
useHttpDelete({
1313
fetchOnBootstrap: true,
@@ -18,7 +18,15 @@ describe('use-http-post', () => {
1818
}
1919
);
2020

21-
await waitForNextUpdate();
21+
expect(result.current[0].isLoading).toBe(true);
22+
23+
await waitFor(
24+
() => {
25+
expect(result.current[0].isLoading).toBe(false);
26+
},
27+
{ interval: 1 }
28+
);
29+
2230
// It's called everytime the state is updated.
2331
expect(useHttpRequestMock).toHaveBeenCalledTimes(3);
2432
expect(useHttpRequestMock).toHaveBeenCalledWith({

‎src/__tests__/use-http-event.spec.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { cleanup } from '@testing-library/react';
2-
import { renderHook, act } from '@testing-library/react-hooks';
1+
import { cleanup, renderHook, act } from '@testing-library/react';
32
import { FetchMock } from 'jest-fetch-mock';
43
import {
54
defaultHttpReqConfig,

‎src/__tests__/use-http-get.spec.ts

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { renderHook } from '@testing-library/react-hooks';
1+
import { waitFor, renderHook } from '@testing-library/react';
22
import { HttpMethod, useHttpGet } from '..';
33
import * as useHttpRequestModule from '../request/use-http-request';
44
import { HttpClientProviderConfigFixture } from './fixtures/http-client-config-provider.fixture';
@@ -7,7 +7,7 @@ describe('use-http-post', () => {
77
it('should perform a post request', async () => {
88
const useHttpRequestMock = jest.spyOn(useHttpRequestModule, 'useHttpRequest');
99

10-
const { waitForNextUpdate } = renderHook(
10+
const { result } = renderHook(
1111
() =>
1212
useHttpGet({
1313
fetchOnBootstrap: true,
@@ -18,7 +18,15 @@ describe('use-http-post', () => {
1818
}
1919
);
2020

21-
await waitForNextUpdate();
21+
expect(result.current[0].isLoading).toBe(true);
22+
23+
await waitFor(
24+
() => {
25+
expect(result.current[0].isLoading).toBe(false);
26+
},
27+
{ interval: 1 }
28+
);
29+
2230
// It's called everytime the state is updated.
2331
expect(useHttpRequestMock).toHaveBeenCalledTimes(3);
2432
expect(useHttpRequestMock).toHaveBeenCalledWith({

‎src/__tests__/use-http-patch.spec.ts

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { renderHook } from '@testing-library/react-hooks';
1+
import { waitFor, renderHook } from '@testing-library/react';
22
import { HttpMethod, useHttpPatch } from '..';
33
import * as useHttpRequestModule from '../request/use-http-request';
44
import { HttpClientProviderConfigFixture } from './fixtures/http-client-config-provider.fixture';
@@ -7,7 +7,7 @@ describe('use-http-post', () => {
77
it('should perform a post request', async () => {
88
const useHttpRequestMock = jest.spyOn(useHttpRequestModule, 'useHttpRequest');
99

10-
const { waitForNextUpdate } = renderHook(
10+
const { result } = renderHook(
1111
() =>
1212
useHttpPatch({
1313
fetchOnBootstrap: true,
@@ -18,7 +18,15 @@ describe('use-http-post', () => {
1818
}
1919
);
2020

21-
await waitForNextUpdate();
21+
expect(result.current[0].isLoading).toBe(true);
22+
23+
await waitFor(
24+
() => {
25+
expect(result.current[0].isLoading).toBe(false);
26+
},
27+
{ interval: 1 }
28+
);
29+
2230
// It's called everytime the state is updated.
2331
expect(useHttpRequestMock).toHaveBeenCalledTimes(3);
2432
expect(useHttpRequestMock).toHaveBeenCalledWith({

‎src/__tests__/use-http-post.spec.ts

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { renderHook } from '@testing-library/react-hooks';
1+
import { waitFor, renderHook } from '@testing-library/react';
22
import { HttpMethod, useHttpPost } from '..';
33
import * as useHttpRequestModule from '../request/use-http-request';
44
import { HttpClientProviderConfigFixture } from './fixtures/http-client-config-provider.fixture';
@@ -7,7 +7,7 @@ describe('use-http-post', () => {
77
it('should perform a post request', async () => {
88
const useHttpRequestMock = jest.spyOn(useHttpRequestModule, 'useHttpRequest');
99

10-
const { waitForNextUpdate } = renderHook(
10+
const { result } = renderHook(
1111
() =>
1212
useHttpPost({
1313
fetchOnBootstrap: true,
@@ -18,7 +18,15 @@ describe('use-http-post', () => {
1818
}
1919
);
2020

21-
await waitForNextUpdate();
21+
expect(result.current[0].isLoading).toBe(true);
22+
23+
await waitFor(
24+
() => {
25+
expect(result.current[0].isLoading).toBe(false);
26+
},
27+
{ interval: 1 }
28+
);
29+
2230
// It's called everytime the state is updated.
2331
expect(useHttpRequestMock).toHaveBeenCalledTimes(3);
2432
expect(useHttpRequestMock).toHaveBeenCalledWith({

‎src/__tests__/use-http-put.spec.ts

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { renderHook } from '@testing-library/react-hooks';
1+
import { waitFor, renderHook } from '@testing-library/react';
22
import { HttpMethod, useHttpPut } from '..';
33
import * as useHttpRequestModule from '../request/use-http-request';
44
import { HttpClientProviderConfigFixture } from './fixtures/http-client-config-provider.fixture';
@@ -7,7 +7,7 @@ describe('use-http-post', () => {
77
it('should perform a post request', async () => {
88
const useHttpRequestMock = jest.spyOn(useHttpRequestModule, 'useHttpRequest');
99

10-
const { waitForNextUpdate } = renderHook(
10+
const { result } = renderHook(
1111
() =>
1212
useHttpPut({
1313
fetchOnBootstrap: true,
@@ -18,7 +18,15 @@ describe('use-http-post', () => {
1818
}
1919
);
2020

21-
await waitForNextUpdate();
21+
expect(result.current[0].isLoading).toBe(true);
22+
23+
await waitFor(
24+
() => {
25+
expect(result.current[0].isLoading).toBe(false);
26+
},
27+
{ interval: 1 }
28+
);
29+
2230
// It's called everytime the state is updated.
2331
expect(useHttpRequestMock).toHaveBeenCalledTimes(3);
2432
expect(useHttpRequestMock).toHaveBeenCalledWith({

‎src/__tests__/use-http-request.spec.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { cleanup } from '@testing-library/react';
2-
import { renderHook, act } from '@testing-library/react-hooks';
1+
import { cleanup, renderHook, act, waitFor } from '@testing-library/react';
32
import { FetchMock } from 'jest-fetch-mock';
43
import {
54
defaultHttpReqConfig,
@@ -153,7 +152,7 @@ describe('use-http-request', () => {
153152
test('should automatically perform the request on mount', async () => {
154153
fetch.mockResponseOnce(JSON.stringify(fetchResponse));
155154

156-
const { result, waitForNextUpdate } = renderHook(
155+
const { result } = renderHook(
157156
() => useHttpRequest({ fetchOnBootstrap: true, initialData: {} }),
158157
{
159158
wrapper: HttpClientProviderConfigFixture.create(),
@@ -166,7 +165,13 @@ describe('use-http-request', () => {
166165
expect(result.current[0].isLoading).toBe(true);
167166
expect(result.current[0].pristine).toBe(false);
168167

169-
await waitForNextUpdate();
168+
// await waitForNextUpdate();
169+
await waitFor(
170+
() => {
171+
expect(result.current[0].isLoading).toBe(false);
172+
},
173+
{ interval: 1 }
174+
);
170175

171176
expect(result.current[0].data).toEqual(fetchResponse);
172177
expect(result.current[0].error).toBeNull();

0 commit comments

Comments
 (0)