Console Test

/**
* Copyright (c) Meta Platforms, Inc. and affiliates.

*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
import {normalizeCodeLocInfo} from './utils';
let React;
let ReactDOMClient;
let act;
let fakeConsole;
let legacyRender;
let mockError;
let mockInfo;
let mockGroup;
let mockGroupCollapsed;
let mockLog;
let mockWarn;
let patchConsole;
let unpatchConsole;
let rendererID;
describe('console', () => {
beforeEach(() => {
const Console = require('react-devtools-shared/src/backend/console');
patchConsole = Console.patch;
unpatchConsole = Console.unpatch;
// Patch a fake console so we can verify with tests below.

// Patching the real console is too complicated,
// because Jest itself has hooks into it as does our test env setup.
mockError = jest.fn();
mockInfo = jest.fn();
mockGroup = jest.fn();
mockGroupCollapsed = jest.fn();
mockLog = jest.fn();
mockWarn = jest.fn();
fakeConsole = {
error: mockError,
info: mockInfo,
log: mockLog,
warn: mockWarn,
group: mockGroup,
groupCollapsed: mockGroupCollapsed,
};
Console.dangerous_setTargetConsoleForTesting(fakeConsole);
global.__REACT_DEVTOOLS_GLOBAL_HOOK__.dangerous_setTargetConsoleForTesting(
fakeConsole,
);
const inject = global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject;

global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = internals => {
rendererID = inject(internals);
Console.registerRenderer(internals);
return rendererID;
};
React = require('react');
ReactDOMClient = require('react-dom/client');
const utils = require('./utils');

act = utils.act;
legacyRender = utils.legacyRender;
});
// @reactVersion >=18.0
it('should not patch console methods that are not explicitly overridden', () => {
expect(fakeConsole.error).not.toBe(mockError);
expect(fakeConsole.info).toBe(mockInfo);
expect(fakeConsole.log).toBe(mockLog);
expect(fakeConsole.warn).not.toBe(mockWarn);
expect(fakeConsole.group).toBe(mockGroup);
expect(fakeConsole.groupCollapsed).toBe(mockGroupCollapsed);
});
it('should patch the console when appendComponentStack is enabled', () => {
unpatchConsole();
expect(fakeConsole.error).toBe(mockError);
expect(fakeConsole.warn).toBe(mockWarn);
patchConsole({
appendComponentStack: true,
breakOnConsoleErrors: false,
showInlineWarningsAndErrors: false,
});
});
it('should patch the console when breakOnConsoleErrors is enabled', () => {
unpatchConsole();
patchConsole({
appendComponentStack: false,
breakOnConsoleErrors: true,
});
});
it('should patch the console when showInlineWarningsAndErrors is enabled', () =>
{
unpatchConsole();
patchConsole({
appendComponentStack: false,
showInlineWarningsAndErrors: true,
});
});
it('should only patch the console once', () => {
const {error, warn} = fakeConsole;
patchConsole({
});
expect(fakeConsole.error).toBe(error);
expect(fakeConsole.warn).toBe(warn);
});
it('should un-patch when requested', () => {
unpatchConsole();
});
it('should pass through logs when there is no current fiber', () => {
expect(mockLog).toHaveBeenCalledTimes(0);
expect(mockWarn).toHaveBeenCalledTimes(0);
expect(mockError).toHaveBeenCalledTimes(0);
fakeConsole.log('log');
fakeConsole.warn('warn');
fakeConsole.error('error');
expect(mockLog.mock.calls[0]).toHaveLength(1);
expect(mockLog.mock.calls[0][0]).toBe('log');
expect(mockWarn.mock.calls[0]).toHaveLength(1);
expect(mockWarn.mock.calls[0][0]).toBe('warn');
expect(mockError.mock.calls[0]).toHaveLength(1);
expect(mockError.mock.calls[0][0]).toBe('error');
});
it('should not append multiple stacks', () => {
global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = true;
const Child = ({children}) => {

fakeConsole.warn('warn\n in Child (at fake.js:123)');
fakeConsole.error('error', '\n in Child (at fake.js:123)');
return null;
};
act(() => legacyRender(<Child />, document.createElement('div')));
expect(mockWarn.mock.calls[0][0]).toBe(
'warn\n in Child (at fake.js:123)',
);
expect(mockError.mock.calls[0][1]).toBe('\n in Child (at fake.js:123)');
});
it('should append component stacks to errors and warnings logged during render',
() => {
const Intermediate = ({children}) => children;

const Parent = ({children}) => (
<Intermediate>
<Child />
</Intermediate>
);
return null;
};
act(() => legacyRender(<Parent />, document.createElement('div')));
expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
);
expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
);
});
it('should append component stacks to errors and warnings logged from effects',
() => {
<Intermediate>
<Child />
</Intermediate>
);
React.useLayoutEffect(() => {
fakeConsole.error('active error');
fakeConsole.log('active log');
fakeConsole.warn('active warn');
});
React.useEffect(() => {
fakeConsole.error('passive error');
fakeConsole.log('passive log');
fakeConsole.warn('passive warn');
});
return null;
};
expect(mockLog.mock.calls[0][0]).toBe('active log');
expect(mockLog.mock.calls[1][0]).toBe('passive log');
expect(mockWarn.mock.calls[0][0]).toBe('active warn');
);
expect(mockWarn.mock.calls[1][0]).toBe('passive warn');
);
expect(mockError.mock.calls[0][0]).toBe('active error');
);
expect(mockError.mock.calls[1][0]).toBe('passive error');
);
});
it('should append component stacks to errors and warnings logged from commit
hooks', () => {

<Intermediate>
<Child />
</Intermediate>
);
class Child extends React.Component<any> {
componentDidMount() {
fakeConsole.error('didMount error');
fakeConsole.log('didMount log');
fakeConsole.warn('didMount warn');
}
componentDidUpdate() {
fakeConsole.error('didUpdate error');
fakeConsole.log('didUpdate log');
fakeConsole.warn('didUpdate warn');
}
render() {
return null;
}
}
const container = document.createElement('div');

act(() => legacyRender(<Parent />, container));
act(() => legacyRender(<Parent />, container));
expect(mockLog.mock.calls[0][0]).toBe('didMount log');
expect(mockLog.mock.calls[1][0]).toBe('didUpdate log');
expect(mockWarn.mock.calls[0][0]).toBe('didMount warn');
);
expect(mockWarn.mock.calls[1][0]).toBe('didUpdate warn');
);
expect(mockError.mock.calls[0][0]).toBe('didMount error');
);
expect(mockError.mock.calls[1][0]).toBe('didUpdate error');
);
});
it('should append component stacks to errors and warnings logged from gDSFP', ()
=> {
<Intermediate>
<Child />
</Intermediate>
);
class Child extends React.Component<any, any> {
state = {};
static getDerivedStateFromProps() {
return null;
}
render() {
return null;
}
}
);
);
});
it('should append stacks after being uninstalled and reinstalled', () => {
global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = false;

return null;
};
patchConsole({
});
'\n in Child (at **)',
);
'\n in Child (at **)',
);
});
it('should be resilient to prepareStackTrace', () => {
Error.prepareStackTrace = function (error, callsites) {

const stack = ['An error occurred:', error.message];
for (let i = 0; i < callsites.length; i++) {
const callsite = callsites[i];
stack.push(
'\t' + callsite.getFunctionName(),
'\t\tat ' + callsite.getFileName(),
'\t\ton line ' + callsite.getLineNumber(),
);
}
return stack.join('\n');
};

<Intermediate>
<Child />
</Intermediate>
);
return null;
};
);
);
});
it('should correctly log Symbols', () => {
const Component = ({children}) => {
fakeConsole.warn('Symbol:', Symbol(''));
return null;
};
act(() => legacyRender(<Component />, document.createElement('div')));
expect(mockWarn.mock.calls[0][0]).toBe('Symbol:');
});
it('should double log if hideConsoleLogsInStrictMode is disabled in Strict mode',

() => {
global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = false;

const root = ReactDOMClient.createRoot(container);
function App() {
fakeConsole.info('info');
fakeConsole.group('group');
fakeConsole.groupCollapsed('groupCollapsed');
return <div />;
}
act(() =>
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
),
);
expect(mockLog.mock.calls[1]).toEqual([
'%c%s',
`color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
'log',
]);
expect(mockWarn.mock.calls[1]).toEqual([
'%c%s',
`color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`,
'warn',
]);
expect(mockError.mock.calls[1]).toEqual([
'%c%s',
`color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
'error',
]);
expect(mockInfo).toHaveBeenCalledTimes(2);
expect(mockInfo.mock.calls[0]).toHaveLength(1);
expect(mockInfo.mock.calls[0][0]).toBe('info');
expect(mockInfo.mock.calls[1]).toEqual([
'%c%s',
'info',
]);
expect(mockGroup).toHaveBeenCalledTimes(2);
expect(mockGroup.mock.calls[0]).toHaveLength(1);
expect(mockGroup.mock.calls[0][0]).toBe('group');
expect(mockGroup.mock.calls[1]).toEqual([
'%c%s',
'group',
]);
expect(mockGroupCollapsed).toHaveBeenCalledTimes(2);
expect(mockGroupCollapsed.mock.calls[0]).toHaveLength(1);
expect(mockGroupCollapsed.mock.calls[0][0]).toBe('groupCollapsed');
expect(mockGroupCollapsed.mock.calls[1]).toEqual([
'%c%s',
'groupCollapsed',
]);
});
it('should not double log if hideConsoleLogsInStrictMode is enabled in Strict

mode', () => {
global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = true;

function App() {
console.log(
'CALL',
global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__,
);
fakeConsole.info('info');
fakeConsole.group('group');
fakeConsole.groupCollapsed('groupCollapsed');
return <div />;
}
act(() =>
root.render(
<React.StrictMode>
<App />
),
);
expect(mockInfo).toHaveBeenCalledTimes(1);
expect(mockInfo.mock.calls[0][0]).toBe('info');
expect(mockGroup).toHaveBeenCalledTimes(1);
expect(mockGroup.mock.calls[0][0]).toBe('group');
expect(mockGroupCollapsed).toHaveBeenCalledTimes(1);
expect(mockGroupCollapsed.mock.calls[0][0]).toBe('groupCollapsed');
});
it('should double log in Strict mode initial render for extension', () => {
// This simulates a render that happens before React DevTools have finished
// their handshake to attach the React DOM renderer functions to DevTools
// In this case, we should still be able to mock the console in Strict mode
global.__REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces.set(
rendererID,
null,
);
function App() {
return <div />;
}
act(() =>
root.render(
<React.StrictMode>
<App />
),
);
expect(mockLog.mock.calls[1]).toEqual([
'%c%s',
'log',
]);
expect(mockWarn.mock.calls[1]).toEqual([
'%c%s',
`color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`,
'warn',
]);
expect(mockError.mock.calls[1]).toEqual([
'%c%s',
`color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
'error',
]);
});
it('should not double log in Strict mode initial render for extension', () => {
global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = true;
// This simulates a render that happens before React DevTools have finished
// their handshake to attach the React DOM renderer functions to DevTools
// In this case, we should still be able to mock the console in Strict mode
global.__REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces.set(
rendererID,
null,
);
function App() {
return <div />;
}
act(() =>
root.render(
<React.StrictMode>
<App />
),
);
});
it('should properly dim component stacks during strict mode double log', () => {


<Intermediate>
<Child />
</Intermediate>
);
return null;
};
act(() =>
root.render(
<React.StrictMode>
<Parent />
),
);
);
expect(mockWarn.mock.calls[1][0]).toEqual('%c%s %s');
expect(mockWarn.mock.calls[1][1]).toMatch('color: rgba(');
expect(mockWarn.mock.calls[1][2]).toEqual('warn');
expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][3]).trim()).toEqual(
'in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
);
expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toEqual(
);
expect(mockError.mock.calls[1][0]).toEqual('%c%s %s');
expect(mockError.mock.calls[1][1]).toMatch('color: rgba(');
expect(mockError.mock.calls[1][2]).toEqual('error');
expect(normalizeCodeLocInfo(mockError.mock.calls[1][3]).trim()).toEqual(
'in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
);
});
});
describe('console error', () => {

beforeEach(() => {
jest.resetModules();
const Console = require('react-devtools-shared/src/backend/console');

patchConsole = Console.patch;
unpatchConsole = Console.unpatch;
// Patch a fake console so we can verify with tests below.

// Patching the real console is too complicated,
// because Jest itself has hooks into it as does our test env setup.
mockError = jest.fn();
mockInfo = jest.fn();
mockGroup = jest.fn();
mockGroupCollapsed = jest.fn();
mockLog = jest.fn();
mockWarn = jest.fn();
fakeConsole = {
error: mockError,
info: mockInfo,
log: mockLog,
warn: mockWarn,
group: mockGroup,
groupCollapsed: mockGroupCollapsed,
};
Console.dangerous_setTargetConsoleForTesting(fakeConsole);
const inject = global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject;

global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = internals => {
inject(internals);
Console.registerRenderer(internals, () => {
throw Error('foo');
});
};
React = require('react');
ReactDOMClient = require('react-dom/client');
const utils = require('./utils');

act = utils.act;
legacyRender = utils.legacyRender;
});
it('error in console log throws without interfering with logging', () => {
function App() {
return <div />;
}
patchConsole({
showInlineWarningsAndErrors: true,
hideConsoleLogsInStrictMode: false,
});
expect(() => {
act(() => {
root.render(<App />);
});
}).toThrowError('foo');
});
});

Console Test

Uploaded by

Copyright:

Available Formats

You might also like

Console Test

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Console Test

Uploaded by

Copyright:

Available Formats

/**

* Copyright (c) Meta Platforms, Inc. and affiliates.

import {normalizeCodeLocInfo} from './utils';

// Patch a fake console so we can verify with tests below.

const inject = global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject;

const utils = require('./utils');

const Child = ({children}) => {

act(() => legacyRender(<Child />, document.createElement('div')));

const Intermediate = ({children}) => children;

act(() => legacyRender(<Parent />, document.createElement('div')));

act(() => legacyRender(<Parent />, document.createElement('div')));

const Intermediate = ({children}) => children;

const container = document.createElement('div');

act(() => legacyRender(<Parent />, document.createElement('div')));

const Child = ({children}) => {

act(() => legacyRender(<Child />, document.createElement('div')));

Error.prepareStackTrace = function (error, callsites) {

const Intermediate = ({children}) => children;

act(() => legacyRender(<Parent />, document.createElement('div')));

act(() => legacyRender(<Component />, document.createElement('div')));

it('should double log if hideConsoleLogsInStrictMode is disabled in Strict mode',

const container = document.createElement('div');

it('should not double log if hideConsoleLogsInStrictMode is enabled in Strict

const container = document.createElement('div');

const container = document.createElement('div');

const Intermediate = ({children}) => children;

describe('console error', () => {

const Console = require('react-devtools-shared/src/backend/console');

// Patch a fake console so we can verify with tests below.

const inject = global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject;

const utils = require('./utils');

You might also like