Skip to content

Commit d0f25a6

Browse files
nebarfnebarf
authored
Merge pull request #40 from nebarf/react-upgrade
Upgrade to React 18
2 parents 0014f7c + 642bdec commit d0f25a6

15 files changed

+195
-117
lines changed

‎.github/workflows/status-check.yml

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ jobs:
1212

1313
strategy:
1414
matrix:
15-
node-version: [12.x, 14.x]
15+
node-version: [14.x, 16.x]
1616

1717
steps:
1818
- name: Checkout repository
@@ -36,7 +36,12 @@ jobs:
3636
- name: Install dependencies
3737
run: yarn install --frozen-lockfile
3838

39-
- name: Run tests
39+
- name: Run tests (React v18)
40+
run: yarn test
41+
42+
- name: Run tests (React v17)
43+
env:
44+
REACT_VERSION: v17
4045
run: yarn test
4146

4247
- name: Build

‎.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
16.14.0

‎jest.config.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,13 @@ module.exports = {
2424

2525
testEnvironment: 'jsdom',
2626
};
27+
28+
if (process.env.REACT_VERSION === 'v17') {
29+
module.exports.cacheDirectory = '.cache/jest-cache-react-17';
30+
module.exports.moduleNameMapper = {
31+
...module.exports.moduleNameMapper,
32+
'^react-dom((\\/.*)?)$': 'react-dom-17$1',
33+
'^react((\\/.*)?)$': 'react-17$1',
34+
'^@testing-library/react((\\/.*)?)$': '@testing-library/react-12$1',
35+
};
36+
}

‎package.json

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -15,38 +15,20 @@
1515
"files": [
1616
"/lib"
1717
],
18-
"scripts": {
19-
"before-release-init": "node ./bin/before-release-init.mjs",
20-
"build": "yarn build:esm && yarn build:cjs",
21-
"build:prod": "yarn build:prod:esm && yarn build:prod:cjs",
22-
"build:watch": "yarn build:esm -w && yarn build:cjs -w",
23-
"build:esm": "tsc",
24-
"build:cjs": "tsc --module commonjs --outDir lib/cjs",
25-
"build:prod:esm": "tsc -p tsconfig.prod.json",
26-
"build:prod:cjs": "tsc -p tsconfig.prod.json --module commonjs --outDir lib/cjs",
27-
"clean-build": "shx rm -rf lib",
28-
"changelog": "auto-changelog -p --template ./changelog.template.hbs",
29-
"prepare": "husky install",
30-
"pre-commit": "lint-staged",
31-
"pre-push": "yarn test",
32-
"release": "release-it",
33-
"release:dry-run": "release-it --dry-run",
34-
"release:patch": "release-it patch",
35-
"release:minor": "release-it minor",
36-
"release:major": "release-it major",
37-
"test": "jest -c ./jest.config.js --env=jsdom",
38-
"test:watch": "jest -c ./jest.config.js --watch --env=jsdom"
18+
"engines": {
19+
"node": "^14 || ^16"
3920
},
4021
"dependencies": {
4122
"react-fast-compare": "^3.2.0"
4223
},
4324
"devDependencies": {
4425
"@testing-library/jest-dom": "^5.14.1",
45-
"@testing-library/react": "^12.1.2",
46-
"@testing-library/react-hooks": "^7.0.2",
26+
"@testing-library/react": "^13.1.1",
27+
"@testing-library/react-12": "npm:@testing-library/react@^12.1.2",
28+
"@testing-library/react-hooks": "^8.0.0",
4729
"@types/jest": "^27.0.2",
48-
"@types/react": "^17.0.27",
49-
"@types/react-dom": "^17.0.9",
30+
"@types/react": "^18.0.0",
31+
"@types/react-dom": "^18.0.0",
5032
"@typescript-eslint/eslint-plugin": "^4.33.0",
5133
"@typescript-eslint/parser": "^4.33.0",
5234
"auto-changelog": "^2.3.0",
@@ -63,15 +45,39 @@
6345
"jest-mock-extended": "^2.0.4",
6446
"lint-staged": "^11.2.0",
6547
"prettier": "^2.4.1",
66-
"react": "^17.0.2",
67-
"react-dom": "^17.0.2",
68-
"react-hooks-testing-library": "^0.6.0",
48+
"react": "^18.0.0",
49+
"react-17": "npm:react@^17.0.2",
50+
"react-dom": "^18.0.0",
51+
"react-dom-17": "npm:react-dom@^17.0.2",
6952
"release-it": "^14.11.6",
7053
"shelljs": "^0.8.4",
7154
"shx": "^0.3.3",
7255
"ts-jest": "^27.0.5",
7356
"typescript": "^4.4.3"
7457
},
58+
"scripts": {
59+
"before-release-init": "node ./bin/before-release-init.mjs",
60+
"build": "yarn build:esm && yarn build:cjs",
61+
"build:prod": "yarn build:prod:esm && yarn build:prod:cjs",
62+
"build:watch": "yarn build:esm -w && yarn build:cjs -w",
63+
"build:esm": "tsc",
64+
"build:cjs": "tsc --module commonjs --outDir lib/cjs",
65+
"build:prod:esm": "tsc -p tsconfig.prod.json",
66+
"build:prod:cjs": "tsc -p tsconfig.prod.json --module commonjs --outDir lib/cjs",
67+
"clean-build": "shx rm -rf lib",
68+
"changelog": "auto-changelog -p --template ./changelog.template.hbs",
69+
"prepare": "husky install",
70+
"pre-commit": "lint-staged",
71+
"pre-push": "yarn test",
72+
"release": "release-it",
73+
"release:dry-run": "release-it --dry-run",
74+
"release:patch": "release-it patch",
75+
"release:minor": "release-it minor",
76+
"release:major": "release-it major",
77+
"test": "jest -c ./jest.config.js --env=jsdom",
78+
"test:react17": "REACT_VERSION=true yarn test",
79+
"test:watch": "jest -c ./jest.config.js --watch --env=jsdom"
80+
},
7581
"peerDependencies": {
7682
"react": "^17.0.2",
7783
"react-dom": "^17.0.2"

‎setup-jest.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
11
import { enableFetchMocks } from 'jest-fetch-mock';
2+
import { renderHook } from '@testing-library/react-hooks';
3+
4+
if (process.env.REACT_VERSION === 'v17') {
5+
jest.mock('@testing-library/react', () => ({
6+
...(jest.requireActual('@testing-library/react') as Record<string, unknown>),
7+
renderHook,
8+
}));
9+
}
210

311
enableFetchMocks();

‎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)