Clean up console.log tests (#28693)
Followups to https://github.com/facebook/react/pull/28680 One of these test don't need to use `console.log`. The others are specifically testing `console.log` behavior, so I added a comment.
Ricky committed
Apr 1, 2024 at 10:50 UTC
e9ae2c8f352289a8c942b4271b9afe7af68dd5c0
3 files changed
+20
-34
packages/react-client/src/__tests__/ReactFlight-test.js
+4
@@ -2108,6 +2108,7 @@ describe('ReactFlight', () => {
2108
throw new Error('err');
2109
}
2110
2111
+ // These tests are specifically testing console.log.
2112
// Assign to `mockConsoleLog` so we can still inspect it when `console.log`
2113
// is overridden by the test modules. The original function will be restored
2114
// after this test finishes by `jest.restoreAllMocks()`.
@@ -2127,6 +2128,9 @@ describe('ReactFlight', () => {
2128
transport = ReactNoopFlightServer.render({root: <ServerComponent />});
2129
}).toErrorDev('err');
2130
2131
+ expect(mockConsoleLog).toHaveBeenCalledTimes(1);
2132
+ expect(mockConsoleLog.mock.calls[0][0]).toBe('hi');
2133
+ expect(mockConsoleLog.mock.calls[0][1].prop).toBe(123);
2134
mockConsoleLog.mockClear();
2135
2136
// The error should not actually get logged because we're not awaiting the root
packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+9
-10
@@ -17,6 +17,8 @@ describe('ReactDOMComponent', () => {
17
const ReactFeatureFlags = require('shared/ReactFeatureFlags');
18
19
let act;
20
+ let assertLog;
21
+ let Scheduler;
22
23
beforeEach(() => {
24
jest.resetModules();
@@ -24,7 +26,9 @@ describe('ReactDOMComponent', () => {
26
ReactDOM = require('react-dom');
27
ReactDOMClient = require('react-dom/client');
28
ReactDOMServer = require('react-dom/server');
29
+ Scheduler = require('scheduler');
30
act = require('internal-test-utils').act;
31
+ assertLog = require('internal-test-utils').assertLog;
32
});
33
34
afterEach(() => {
@@ -1611,7 +1615,6 @@ describe('ReactDOMComponent', () => {
1615
});
1616
1617
it('should work error event on <source> element', async () => {
1614
- spyOnDevAndProd(console, 'log').mockImplementation(() => {});
1618
const container = document.createElement('div');
1619
const root = ReactDOMClient.createRoot(container);
1620
await act(() => {
@@ -1620,7 +1623,7 @@ describe('ReactDOMComponent', () => {
1623
<source
1624
src="http://example.org/video"
1625
type="video/mp4"
1623
- onError={e => console.log('onError called')}
1626
+ onError={e => Scheduler.log('onError called')}
1627
/>
1628
</video>,
1629
);
@@ -1631,8 +1634,7 @@ describe('ReactDOMComponent', () => {
1634
container.getElementsByTagName('source')[0].dispatchEvent(errorEvent);
1635
1636
if (__DEV__) {
1634
- expect(console.log).toHaveBeenCalledTimes(1);
1635
- expect(console.log.mock.calls[0][0]).toContain('onError called');
1637
+ assertLog(['onError called']);
1638
}
1639
});
1640
@@ -1921,7 +1923,6 @@ describe('ReactDOMComponent', () => {
1923
});
1924
1925
it('should work load and error events on <image> element in SVG', async () => {
1924
- spyOnDevAndProd(console, 'log').mockImplementation(() => {});
1926
const container = document.createElement('div');
1927
const root = ReactDOMClient.createRoot(container);
1928
await act(() => {
@@ -1929,8 +1930,8 @@ describe('ReactDOMComponent', () => {
1930
<svg>
1931
<image
1932
xlinkHref="http://example.org/image"
1932
- onError={e => console.log('onError called')}
1933
- onLoad={e => console.log('onLoad called')}
1933
+ onError={e => Scheduler.log('onError called')}
1934
+ onLoad={e => Scheduler.log('onLoad called')}
1935
/>
1936
</svg>,
1937
);
@@ -1946,9 +1947,7 @@ describe('ReactDOMComponent', () => {
1947
container.getElementsByTagName('image')[0].dispatchEvent(loadEvent);
1948
1949
if (__DEV__) {
1949
- expect(console.log).toHaveBeenCalledTimes(2);
1950
- expect(console.log.mock.calls[0][0]).toContain('onError called');
1951
- expect(console.log.mock.calls[1][0]).toContain('onLoad called');
1950
+ assertLog(['onError called', 'onLoad called']);
1951
}
1952
});
1953
packages/react/src/__tests__/ReactStrictMode-test.js
+7
-24
@@ -1146,12 +1146,17 @@ describe('context legacy', () => {
1146
React = require('react');
1147
ReactDOMClient = require('react-dom/client');
1148
act = require('internal-test-utils').act;
1149
+
1150
+ // These tests are specifically testing console.log.
1151
+ spyOnDevAndProd(console, 'log').mockImplementation(() => {});
1152
+ });
1153
+
1154
+ afterEach(() => {
1155
+ console.log.mockRestore();
1156
});
1157
1158
if (ReactFeatureFlags.consoleManagedByDevToolsDuringStrictMode) {
1159
it('does not disable logs for class double render', async () => {
1153
- spyOnDevAndProd(console, 'log').mockImplementation(() => {});
1154
-
1160
let count = 0;
1161
class Foo extends React.Component {
1162
render() {
@@ -1179,8 +1184,6 @@ describe('context legacy', () => {
1184
});
1185
1186
it('does not disable logs for class double ctor', async () => {
1182
- spyOnDevAndProd(console, 'log').mockImplementation(() => {});
1183
-
1187
let count = 0;
1188
class Foo extends React.Component {
1189
constructor(props) {
@@ -1211,8 +1214,6 @@ describe('context legacy', () => {
1214
});
1215
1216
it('does not disable logs for class double getDerivedStateFromProps', async () => {
1214
- spyOnDevAndProd(console, 'log').mockImplementation(() => {});
1215
-
1217
let count = 0;
1218
class Foo extends React.Component {
1219
state = {};
@@ -1244,8 +1245,6 @@ describe('context legacy', () => {
1245
});
1246
1247
it('does not disable logs for class double shouldComponentUpdate', async () => {
1247
- spyOnDevAndProd(console, 'log').mockImplementation(() => {});
1248
-
1248
let count = 0;
1249
class Foo extends React.Component {
1250
state = {};
@@ -1285,8 +1284,6 @@ describe('context legacy', () => {
1284
});
1285
1286
it('does not disable logs for class state updaters', async () => {
1288
- spyOnDevAndProd(console, 'log').mockImplementation(() => {});
1289
-
1287
let inst;
1288
let count = 0;
1289
class Foo extends React.Component {
@@ -1323,8 +1320,6 @@ describe('context legacy', () => {
1320
});
1321
1322
it('does not disable logs for function double render', async () => {
1326
- spyOnDevAndProd(console, 'log').mockImplementation(() => {});
1327
-
1323
let count = 0;
1324
function Foo() {
1325
count++;
@@ -1350,8 +1345,6 @@ describe('context legacy', () => {
1345
});
1346
} else {
1347
it('disable logs for class double render', async () => {
1353
- spyOnDevAndProd(console, 'log').mockImplementation(() => {});
1354
-
1348
let count = 0;
1349
class Foo extends React.Component {
1350
render() {
@@ -1379,8 +1372,6 @@ describe('context legacy', () => {
1372
});
1373
1374
it('disables logs for class double ctor', async () => {
1382
- spyOnDevAndProd(console, 'log').mockImplementation(() => {});
1383
-
1375
let count = 0;
1376
class Foo extends React.Component {
1377
constructor(props) {
@@ -1411,8 +1402,6 @@ describe('context legacy', () => {
1402
});
1403
1404
it('disable logs for class double getDerivedStateFromProps', async () => {
1414
- spyOnDevAndProd(console, 'log').mockImplementation(() => {});
1415
-
1405
let count = 0;
1406
class Foo extends React.Component {
1407
state = {};
@@ -1444,8 +1433,6 @@ describe('context legacy', () => {
1433
});
1434
1435
it('disable logs for class double shouldComponentUpdate', async () => {
1447
- spyOnDevAndProd(console, 'log').mockImplementation(() => {});
1448
-
1436
let count = 0;
1437
class Foo extends React.Component {
1438
state = {};
@@ -1484,8 +1471,6 @@ describe('context legacy', () => {
1471
});
1472
1473
it('disable logs for class state updaters', async () => {
1487
- spyOnDevAndProd(console, 'log').mockImplementation(() => {});
1488
-
1474
let inst;
1475
let count = 0;
1476
class Foo extends React.Component {
@@ -1522,8 +1507,6 @@ describe('context legacy', () => {
1507
});
1508
1509
it('disable logs for function double render', async () => {
1525
- spyOnDevAndProd(console, 'log').mockImplementation(() => {});
1526
-
1510
let count = 0;
1511
function Foo() {
1512
count++;