Skip to content

Commit 22ac4a7

Browse files
AbhiPrasadAbhiPrasad
committed
feat(react): Add React 18 as peer dep
- Update tests to test against React 18 - Remove unused `react-test-renderer` dep - Update tests to use `act()`
1 parent 8035b14 commit 22ac4a7

File tree

6 files changed

+119
-82
lines changed

6 files changed

+119
-82
lines changed

‎packages/react/package.json

+5-6
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@
2424
"tslib": "^1.9.3"
2525
},
2626
"peerDependencies": {
27-
"react": "15.x || 16.x || 17.x"
27+
"react": "15.x || 16.x || 17.x || 18.x"
2828
},
2929
"devDependencies": {
30-
"@testing-library/react": "^11.2.6",
31-
"@testing-library/react-hooks": "^5.1.1",
30+
"@testing-library/react": "^13.0.0-alpha.6",
31+
"@testing-library/react-hooks": "^7.0.2",
3232
"@types/history-4": "npm:@types/history@4.7.8",
3333
"@types/history-5": "npm:@types/history@4.7.8",
3434
"@types/hoist-non-react-statics": "^3.3.1",
@@ -41,12 +41,11 @@
4141
"history-4": "npm:history@4.6.0",
4242
"history-5": "npm:history@4.9.0",
4343
"jsdom": "^16.2.2",
44-
"react": "^17.0.0",
45-
"react-dom": "^17.0.0",
44+
"react": "^18.0.0",
45+
"react-dom": "^18.0.0",
4646
"react-router-3": "npm:react-router@3.2.0",
4747
"react-router-4": "npm:react-router@4.1.0",
4848
"react-router-5": "npm:react-router@5.0.0",
49-
"react-test-renderer": "^16.13.1",
5049
"redux": "^4.0.5"
5150
},
5251
"scripts": {

‎packages/react/test/errorboundary.test.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,8 @@ describe('isAtLeastReact17', () => {
341341
['React 17', '17.0.0', true],
342342
['React 17 with no patch', '17.4', true],
343343
['React 17 with no patch and no minor', '17', true],
344-
['React 18', '18.0.0', true],
344+
['React 18', '18.1.0', true],
345+
['React 19', '19.0.0', true],
345346
])('%s', (_: string, input: string, output: ReturnType<typeof isAtLeastReact17>) => {
346347
expect(isAtLeastReact17(input)).toBe(output);
347348
});

‎packages/react/test/reactrouterv3.test.tsx

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { render } from '@testing-library/react';
1+
import { act, render } from '@testing-library/react';
22
import * as React from 'react';
33
import { createMemoryHistory, createRoutes, IndexRoute, match, Route, Router } from 'react-router-3';
44

@@ -108,7 +108,9 @@ describe('React Router V3', () => {
108108
instrumentation(mockStartTransaction);
109109
const { container } = render(<Router history={history}>{routes}</Router>);
110110

111-
history.push('/users/123');
111+
act(() => {
112+
history.push('/users/123');
113+
});
112114
expect(container.innerHTML).toContain('123');
113115

114116
expect(mockStartTransaction).toHaveBeenCalledTimes(2);
@@ -124,7 +126,9 @@ describe('React Router V3', () => {
124126
instrumentation(mockStartTransaction);
125127
const { container } = render(<Router history={history}>{routes}</Router>);
126128

127-
history.push('/organizations/1234/v1/758');
129+
act(() => {
130+
history.push('/organizations/1234/v1/758');
131+
});
128132
expect(container.innerHTML).toContain('Team');
129133

130134
expect(mockStartTransaction).toHaveBeenCalledTimes(2);
@@ -134,7 +138,9 @@ describe('React Router V3', () => {
134138
tags: { from: '/', 'routing.instrumentation': 'react-router-v3' },
135139
});
136140

137-
history.push('/organizations/543');
141+
act(() => {
142+
history.push('/organizations/543');
143+
});
138144
expect(container.innerHTML).toContain('OrgId');
139145

140146
expect(mockStartTransaction).toHaveBeenCalledTimes(3);

‎packages/react/test/reactrouterv4.test.tsx

+20-12
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { render } from '@testing-library/react';
1+
import { act, render } from '@testing-library/react';
22
import { createMemoryHistory } from 'history-4';
33
import * as React from 'react';
44
import { matchPath, Route, Router, Switch } from 'react-router-4';
@@ -125,7 +125,7 @@ describe('React Router v4', () => {
125125

126126
it('does not normalize transaction name ', () => {
127127
const [mockStartTransaction, history] = createInstrumentation();
128-
const { container } = render(
128+
const { getByText } = render(
129129
<Router history={history}>
130130
<Switch>
131131
<Route path="/users/:userid" component={() => <div>UserId</div>} />
@@ -135,8 +135,10 @@ describe('React Router v4', () => {
135135
</Router>,
136136
);
137137

138-
history.push('/users/123');
139-
expect(container.innerHTML).toContain('UserId');
138+
act(() => {
139+
history.push('/users/123');
140+
});
141+
getByText('UserId');
140142

141143
expect(mockStartTransaction).toHaveBeenCalledTimes(2);
142144
expect(mockStartTransaction).toHaveBeenLastCalledWith({
@@ -149,7 +151,7 @@ describe('React Router v4', () => {
149151
it('normalizes transaction name with custom Route', () => {
150152
const [mockStartTransaction, history, { mockSetName }] = createInstrumentation();
151153
const SentryRoute = withSentryRouting(Route);
152-
const { container } = render(
154+
const { getByText } = render(
153155
<Router history={history}>
154156
<Switch>
155157
<SentryRoute path="/users/:userid" component={() => <div>UserId</div>} />
@@ -159,8 +161,10 @@ describe('React Router v4', () => {
159161
</Router>,
160162
);
161163

162-
history.push('/users/123');
163-
expect(container.innerHTML).toContain('UserId');
164+
act(() => {
165+
history.push('/users/123');
166+
});
167+
getByText('UserId');
164168

165169
expect(mockStartTransaction).toHaveBeenCalledTimes(2);
166170
expect(mockStartTransaction).toHaveBeenLastCalledWith({
@@ -175,7 +179,7 @@ describe('React Router v4', () => {
175179
it('normalizes nested transaction names with custom Route', () => {
176180
const [mockStartTransaction, history, { mockSetName }] = createInstrumentation();
177181
const SentryRoute = withSentryRouting(Route);
178-
const { container } = render(
182+
const { getByText } = render(
179183
<Router history={history}>
180184
<Switch>
181185
<SentryRoute path="/organizations/:orgid/v1/:teamid" component={() => <div>Team</div>} />
@@ -185,8 +189,10 @@ describe('React Router v4', () => {
185189
</Router>,
186190
);
187191

188-
history.push('/organizations/1234/v1/758');
189-
expect(container.innerHTML).toContain('Team');
192+
act(() => {
193+
history.push('/organizations/1234/v1/758');
194+
});
195+
getByText('Team');
190196

191197
expect(mockStartTransaction).toHaveBeenCalledTimes(2);
192198
expect(mockStartTransaction).toHaveBeenLastCalledWith({
@@ -197,8 +203,10 @@ describe('React Router v4', () => {
197203
expect(mockSetName).toHaveBeenCalledTimes(2);
198204
expect(mockSetName).toHaveBeenLastCalledWith('/organizations/:orgid/v1/:teamid');
199205

200-
history.push('/organizations/543');
201-
expect(container.innerHTML).toContain('OrgId');
206+
act(() => {
207+
history.push('/organizations/543');
208+
});
209+
getByText('OrgId');
202210

203211
expect(mockStartTransaction).toHaveBeenCalledTimes(3);
204212
expect(mockStartTransaction).toHaveBeenLastCalledWith({

‎packages/react/test/reactrouterv5.test.tsx

+22-13
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { render } from '@testing-library/react';
1+
import { render, act } from '@testing-library/react';
22
import { createMemoryHistory } from 'history-4';
33
import * as React from 'react';
44
import { matchPath, Route, Router, Switch } from 'react-router-5';
@@ -125,7 +125,7 @@ describe('React Router v5', () => {
125125

126126
it('does not normalize transaction name ', () => {
127127
const [mockStartTransaction, history] = createInstrumentation();
128-
const { container } = render(
128+
const { getByText } = render(
129129
<Router history={history}>
130130
<Switch>
131131
<Route path="/users/:userid" component={() => <div>UserId</div>} />
@@ -135,8 +135,10 @@ describe('React Router v5', () => {
135135
</Router>,
136136
);
137137

138-
history.push('/users/123');
139-
expect(container.innerHTML).toContain('UserId');
138+
act(() => {
139+
history.push('/users/123');
140+
});
141+
getByText('UserId');
140142

141143
expect(mockStartTransaction).toHaveBeenCalledTimes(2);
142144
expect(mockStartTransaction).toHaveBeenLastCalledWith({
@@ -149,7 +151,8 @@ describe('React Router v5', () => {
149151
it('normalizes transaction name with custom Route', () => {
150152
const [mockStartTransaction, history, { mockSetName }] = createInstrumentation();
151153
const SentryRoute = withSentryRouting(Route);
152-
const { container } = render(
154+
155+
const { getByText } = render(
153156
<Router history={history}>
154157
<Switch>
155158
<SentryRoute path="/users/:userid" component={() => <div>UserId</div>} />
@@ -158,9 +161,10 @@ describe('React Router v5', () => {
158161
</Switch>
159162
</Router>,
160163
);
161-
162-
history.push('/users/123');
163-
expect(container.innerHTML).toContain('UserId');
164+
act(() => {
165+
history.push('/users/123');
166+
});
167+
getByText('UserId');
164168

165169
expect(mockStartTransaction).toHaveBeenCalledTimes(2);
166170
expect(mockStartTransaction).toHaveBeenLastCalledWith({
@@ -175,7 +179,8 @@ describe('React Router v5', () => {
175179
it('normalizes nested transaction names with custom Route', () => {
176180
const [mockStartTransaction, history, { mockSetName }] = createInstrumentation();
177181
const SentryRoute = withSentryRouting(Route);
178-
const { container } = render(
182+
183+
const { getByText } = render(
179184
<Router history={history}>
180185
<Switch>
181186
<SentryRoute path="/organizations/:orgid/v1/:teamid" component={() => <div>Team</div>} />
@@ -185,8 +190,10 @@ describe('React Router v5', () => {
185190
</Router>,
186191
);
187192

188-
history.push('/organizations/1234/v1/758');
189-
expect(container.innerHTML).toContain('Team');
193+
act(() => {
194+
history.push('/organizations/1234/v1/758');
195+
});
196+
getByText('Team');
190197

191198
expect(mockStartTransaction).toHaveBeenCalledTimes(2);
192199
expect(mockStartTransaction).toHaveBeenLastCalledWith({
@@ -197,8 +204,10 @@ describe('React Router v5', () => {
197204
expect(mockSetName).toHaveBeenCalledTimes(2);
198205
expect(mockSetName).toHaveBeenLastCalledWith('/organizations/:orgid/v1/:teamid');
199206

200-
history.push('/organizations/543');
201-
expect(container.innerHTML).toContain('OrgId');
207+
act(() => {
208+
history.push('/organizations/543');
209+
});
210+
getByText('OrgId');
202211

203212
expect(mockStartTransaction).toHaveBeenCalledTimes(3);
204213
expect(mockStartTransaction).toHaveBeenLastCalledWith({

0 commit comments

Comments
 (0)