diff --git a/packages/react-native/Libraries/LogBox/Data/LogBoxData.js b/packages/react-native/Libraries/LogBox/Data/LogBoxData.js index 08c631c8fec2d8..367a78dd70db24 100644 --- a/packages/react-native/Libraries/LogBox/Data/LogBoxData.js +++ b/packages/react-native/Libraries/LogBox/Data/LogBoxData.js @@ -82,9 +82,9 @@ let warningFilter: WarningFilter = function (format) { return { finalFormat: format, forceDialogImmediately: false, - suppressDialog_LEGACY: false, + suppressDialog_LEGACY: true, suppressCompletely: false, - monitorEvent: 'warning_unhandled', + monitorEvent: 'unknown', monitorListVersion: 0, monitorSampleRate: 1, }; diff --git a/packages/react-native/Libraries/LogBox/__tests__/LogBox-integration-test.js b/packages/react-native/Libraries/LogBox/__tests__/LogBox-integration-test.js index 1e64e5e11efd8d..07ea7507d77752 100644 --- a/packages/react-native/Libraries/LogBox/__tests__/LogBox-integration-test.js +++ b/packages/react-native/Libraries/LogBox/__tests__/LogBox-integration-test.js @@ -11,29 +11,45 @@ import { DoesNotUseKey, FragmentWithProp, - ManualConsoleError, - ManualConsoleErrorWithStack, } from './__fixtures__/ReactWarningFixtures'; import * as React from 'react'; const LogBoxData = require('../Data/LogBoxData'); const TestRenderer = require('react-test-renderer'); -const ExceptionsManager = require('../../Core/ExceptionsManager.js'); - const installLogBox = () => { - const LogBox = require('../LogBox').default; + const LogBox = require('../LogBox'); + LogBox.install(); }; const uninstallLogBox = () => { - const LogBox = require('../LogBox').default; + const LogBox = require('../LogBox'); LogBox.uninstall(); }; -// TODO: we can remove all the symetric matchers once OSS lands component stack frames. -// For now, the component stack parsing differs in ways we can't easily detect in this test. -describe('LogBox', () => { +const BEFORE_SLASH_RE = /(?:\/[a-zA-Z]+\/)(.+?)(?:\/.+)\//; + +const cleanPath = message => { + return message.replace(BEFORE_SLASH_RE, '/path/to/'); +}; + +const cleanLog = logs => { + return logs.map(log => { + return { + ...log, + componentStack: log.componentStack.map(stack => ({ + ...stack, + fileName: cleanPath(stack.fileName), + })), + }; + }); +}; + +// TODO(T71117418): Re-enable skipped LogBox integration tests once React component +// stack frames are the same internally and in open source. +// eslint-disable-next-line jest/no-disabled-tests +describe.skip('LogBox', () => { const {error, warn} = console; const mockError = jest.fn(); const mockWarn = jest.fn(); @@ -41,14 +57,10 @@ describe('LogBox', () => { beforeEach(() => { jest.resetModules(); jest.restoreAllMocks(); - jest.spyOn(console, 'error').mockImplementation(() => {}); mockError.mockClear(); mockWarn.mockClear(); - // Reset ExceptionManager patching. - if (console._errorOriginal) { - console._errorOriginal = null; - } + (console: any).error = mockError; (console: any).warn = mockWarn; }); @@ -67,10 +79,7 @@ describe('LogBox', () => { // so we can assert on what React logs. jest.spyOn(console, 'error'); - let output; - TestRenderer.act(() => { - output = TestRenderer.create(); - }); + const output = TestRenderer.create(); // The key error should always be the highest severity. // In LogBox, we expect these errors to: @@ -79,37 +88,16 @@ describe('LogBox', () => { // - Pass to console.error, with a "Warning" prefix so it does not pop a RedBox. expect(output).toBeDefined(); expect(mockWarn).not.toBeCalled(); - expect(console.error).toBeCalledTimes(1); - expect(console.error.mock.calls[0]).toEqual([ - 'Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.%s', - '\n\nCheck the render method of `DoesNotUseKey`.', - '', - expect.stringMatching('at DoesNotUseKey'), - ]); - expect(spy).toHaveBeenCalledWith({ - level: 'error', - category: expect.stringContaining( - 'Warning: Each child in a list should have a unique', - ), - componentStack: expect.anything(), - componentStackType: 'stack', - message: { - content: - 'Warning: Each child in a list should have a unique "key" prop.\n\nCheck the render method of `DoesNotUseKey`. See https://react.dev/link/warning-keys for more information.', - substitutions: [ - {length: 45, offset: 62}, - {length: 0, offset: 107}, - ], - }, - }); + expect(console.error.mock.calls[0].map(cleanPath)).toMatchSnapshot( + 'Log sent from React', + ); + expect(cleanLog(spy.mock.calls[0])).toMatchSnapshot('Log added to LogBox'); + expect(mockError.mock.calls[0].map(cleanPath)).toMatchSnapshot( + 'Log passed to console error', + ); // The Warning: prefix is added due to a hack in LogBox to prevent double logging. - // We also interpolate the string before passing to the underlying console method. - expect(mockError.mock.calls[0]).toEqual([ - expect.stringMatching( - 'Warning: Each child in a list should have a unique "key" prop.\n\nCheck the render method of `DoesNotUseKey`. See https://react.dev/link/warning-keys for more information.\n at ', - ), - ]); + expect(mockError.mock.calls[0][0].startsWith('Warning: ')).toBe(true); }); it('integrates with React and handles a fragment warning in LogBox', () => { @@ -120,10 +108,7 @@ describe('LogBox', () => { // so we can assert on what React logs. jest.spyOn(console, 'error'); - let output; - TestRenderer.act(() => { - output = TestRenderer.create(); - }); + const output = TestRenderer.create(); // The fragment warning is not as severe. For this warning we don't want to // pop open a dialog, so we show a collapsed error UI. @@ -133,125 +118,15 @@ describe('LogBox', () => { // - Pass to console.error, with a "Warning" prefix so it does not pop a RedBox. expect(output).toBeDefined(); expect(mockWarn).not.toBeCalled(); - expect(console.error).toBeCalledTimes(1); - expect(console.error.mock.calls[0]).toEqual([ - 'Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.%s', - 'invalid', - expect.stringMatching('at FragmentWithProp'), - ]); - expect(spy).toHaveBeenCalledWith({ - level: 'error', - category: expect.stringContaining('Warning: Invalid prop'), - componentStack: expect.anything(), - componentStackType: expect.stringMatching(/(stack|legacy)/), - message: { - content: - 'Warning: Invalid prop `invalid` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.', - substitutions: [{length: 7, offset: 23}], - }, - }); - - // The Warning: prefix is added due to a hack in LogBox to prevent double logging. - // We also interpolate the string before passing to the underlying console method. - expect(mockError.mock.calls[0]).toEqual([ - expect.stringMatching( - 'Warning: Invalid prop `invalid` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.\n at FragmentWithProp', - ), - ]); - }); - - it('handles a manual console.error without a component stack in LogBox', () => { - const LogBox = require('../LogBox').default; - const spy = jest.spyOn(LogBox, 'addException'); - installLogBox(); - - // console.error handling depends on installing the ExceptionsManager error reporter. - ExceptionsManager.installConsoleErrorReporter(); - - // Spy console.error after LogBox is installed - // so we can assert on what React logs. - jest.spyOn(console, 'error'); - - let output; - TestRenderer.act(() => { - output = TestRenderer.create(); - }); - - // Manual console errors should show a collapsed error dialog. - // When there is no component stack, we expect these errors to: - // - Go to the LogBox patch and fall through to console.error. - // - Get picked up by the ExceptionsManager console.error override. - // - Get passed back to LogBox via addException (non-fatal). - expect(output).toBeDefined(); - expect(mockWarn).not.toBeCalled(); - expect(spy).toBeCalledTimes(1); - expect(console.error).toBeCalledTimes(1); - expect(console.error.mock.calls[0]).toEqual(['Manual console error']); - expect(spy).toHaveBeenCalledWith({ - id: 1, - isComponentError: false, - isFatal: false, - name: 'console.error', - originalMessage: 'Manual console error', - message: 'console.error: Manual console error', - extraData: expect.anything(), - componentStack: null, - stack: expect.anything(), - }); - - // No Warning: prefix is added due since this is falling through. - expect(mockError.mock.calls[0]).toEqual(['Manual console error']); - }); - - it('handles a manual console.error with a component stack in LogBox', () => { - const spy = jest.spyOn(LogBoxData, 'addLog'); - installLogBox(); - - // console.error handling depends on installing the ExceptionsManager error reporter. - ExceptionsManager.installConsoleErrorReporter(); - - // Spy console.error after LogBox is installed - // so we can assert on what React logs. - jest.spyOn(console, 'error'); - - let output; - TestRenderer.act(() => { - output = TestRenderer.create(); - }); - - // Manual console errors should show a collapsed error dialog. - // When there is a component stack, we expect these errors to: - // - Go to the LogBox patch and be detected as a React error. - // - Check the warning filter to see if there is a fiter setting. - // - Call console.error with the parsed error. - // - Get picked up by ExceptionsManager console.error override. - // - Log to console.error. - expect(output).toBeDefined(); - expect(mockWarn).not.toBeCalled(); - expect(console.error).toBeCalledTimes(1); - expect(spy).toBeCalledTimes(1); - expect(console.error.mock.calls[0]).toEqual([ - expect.stringContaining( - 'Manual console error\n at ManualConsoleErrorWithStack', - ), - ]); - expect(spy).toHaveBeenCalledWith({ - level: 'error', - category: expect.stringContaining('Warning: Manual console error'), - componentStack: expect.anything(), - componentStackType: 'stack', - message: { - content: 'Warning: Manual console error', - substitutions: [], - }, - }); + expect(console.error.mock.calls[0].map(cleanPath)).toMatchSnapshot( + 'Log sent from React', + ); + expect(cleanLog(spy.mock.calls[0])).toMatchSnapshot('Log added to LogBox'); + expect(mockError.mock.calls[0].map(cleanPath)).toMatchSnapshot( + 'Log passed to console error', + ); // The Warning: prefix is added due to a hack in LogBox to prevent double logging. - // We also interpolate the string before passing to the underlying console method. - expect(mockError.mock.calls[0]).toEqual([ - expect.stringMatching( - 'Warning: Manual console error\n at ManualConsoleErrorWithStack', - ), - ]); + expect(mockError.mock.calls[0][0].startsWith('Warning: ')).toBe(true); }); }); diff --git a/packages/react-native/Libraries/LogBox/__tests__/LogBox-test.js b/packages/react-native/Libraries/LogBox/__tests__/LogBox-test.js index a8a40825354a1f..be5ea785bbb5e1 100644 --- a/packages/react-native/Libraries/LogBox/__tests__/LogBox-test.js +++ b/packages/react-native/Libraries/LogBox/__tests__/LogBox-test.js @@ -13,7 +13,6 @@ const LogBoxData = require('../Data/LogBoxData'); const LogBox = require('../LogBox').default; -const ExceptionsManager = require('../../Core/ExceptionsManager.js'); declare var console: any; @@ -35,18 +34,15 @@ describe('LogBox', () => { beforeEach(() => { jest.resetModules(); - jest.restoreAllMocks(); console.error = jest.fn(); + console.log = jest.fn(); console.warn = jest.fn(); }); afterEach(() => { LogBox.uninstall(); - // Reset ExceptionManager patching. - if (console._errorOriginal) { - console._errorOriginal = null; - } console.error = error; + console.log = log; console.warn = warn; }); @@ -99,7 +95,7 @@ describe('LogBox', () => { }); it('registers warnings', () => { - jest.spyOn(LogBoxData, 'addLog'); + jest.mock('../Data/LogBoxData'); LogBox.install(); @@ -109,14 +105,13 @@ describe('LogBox', () => { }); it('reports a LogBox exception if we fail to add warnings', () => { - jest.spyOn(LogBoxData, 'addLog'); - jest.spyOn(LogBoxData, 'reportLogBoxError'); + jest.mock('../Data/LogBoxData'); + const mockError = new Error('Simulated error'); // Picking a random implementation detail to simulate throwing. - jest.spyOn(LogBoxData, 'isMessageIgnored').mockImplementation(() => { + (LogBoxData.isMessageIgnored: any).mockImplementation(() => { throw mockError; }); - const mockError = new Error('Simulated error'); LogBox.install(); @@ -128,8 +123,7 @@ describe('LogBox', () => { }); it('only registers errors beginning with "Warning: "', () => { - jest.spyOn(LogBoxData, 'addLog'); - jest.spyOn(LogBoxData, 'checkWarningFilter'); + jest.mock('../Data/LogBoxData'); LogBox.install(); @@ -139,8 +133,7 @@ describe('LogBox', () => { }); it('registers react errors with the formatting from filter', () => { - jest.spyOn(LogBoxData, 'addLog'); - jest.spyOn(LogBoxData, 'checkWarningFilter'); + jest.mock('../Data/LogBoxData'); mockFilterResult({ finalFormat: 'Custom format', @@ -164,8 +157,7 @@ describe('LogBox', () => { }); it('registers errors with component stack as errors by default', () => { - jest.spyOn(LogBoxData, 'addLog'); - jest.spyOn(LogBoxData, 'checkWarningFilter'); + jest.mock('../Data/LogBoxData'); mockFilterResult({}); @@ -182,8 +174,7 @@ describe('LogBox', () => { }); it('registers errors with component stack as errors by default if not found in warning filter', () => { - jest.spyOn(LogBoxData, 'addLog'); - jest.spyOn(LogBoxData, 'checkWarningFilter'); + jest.mock('../Data/LogBoxData'); mockFilterResult({ monitorEvent: 'warning_unhandled', @@ -202,12 +193,10 @@ describe('LogBox', () => { }); it('registers errors with component stack with legacy suppression as warning', () => { - jest.spyOn(LogBoxData, 'addLog'); - jest.spyOn(LogBoxData, 'checkWarningFilter'); + jest.mock('../Data/LogBoxData'); mockFilterResult({ suppressDialog_LEGACY: true, - monitorEvent: 'warning', }); LogBox.install(); @@ -222,12 +211,10 @@ describe('LogBox', () => { }); it('registers errors with component stack and a forced dialog as fatals', () => { - jest.spyOn(LogBoxData, 'addLog'); - jest.spyOn(LogBoxData, 'checkWarningFilter'); + jest.mock('../Data/LogBoxData'); mockFilterResult({ forceDialogImmediately: true, - monitorEvent: 'warning', }); LogBox.install(); @@ -242,8 +229,7 @@ describe('LogBox', () => { }); it('registers warning module errors with the formatting from filter', () => { - jest.spyOn(LogBoxData, 'addLog'); - jest.spyOn(LogBoxData, 'checkWarningFilter'); + jest.mock('../Data/LogBoxData'); mockFilterResult({ finalFormat: 'Custom format', @@ -262,8 +248,7 @@ describe('LogBox', () => { }); it('registers warning module errors as errors by default', () => { - jest.spyOn(LogBoxData, 'addLog'); - jest.spyOn(LogBoxData, 'checkWarningFilter'); + jest.mock('../Data/LogBoxData'); mockFilterResult({}); @@ -277,12 +262,10 @@ describe('LogBox', () => { }); it('registers warning module errors with only legacy suppression as warning', () => { - jest.spyOn(LogBoxData, 'addLog'); - jest.spyOn(LogBoxData, 'checkWarningFilter'); + jest.mock('../Data/LogBoxData'); mockFilterResult({ suppressDialog_LEGACY: true, - monitorEvent: 'warning', }); LogBox.install(); @@ -294,12 +277,10 @@ describe('LogBox', () => { }); it('registers warning module errors with a forced dialog as fatals', () => { - jest.spyOn(LogBoxData, 'addLog'); - jest.spyOn(LogBoxData, 'checkWarningFilter'); + jest.mock('../Data/LogBoxData'); mockFilterResult({ forceDialogImmediately: true, - monitorEvent: 'warning', }); LogBox.install(); @@ -311,12 +292,10 @@ describe('LogBox', () => { }); it('ignores warning module errors that are suppressed completely', () => { - jest.spyOn(LogBoxData, 'addLog'); - jest.spyOn(LogBoxData, 'checkWarningFilter'); + jest.mock('../Data/LogBoxData'); mockFilterResult({ suppressCompletely: true, - monitorEvent: 'warning', }); LogBox.install(); @@ -326,11 +305,10 @@ describe('LogBox', () => { }); it('ignores warning module errors that are pattern ignored', () => { - jest.spyOn(LogBoxData, 'checkWarningFilter'); - jest.spyOn(LogBoxData, 'isMessageIgnored').mockReturnValue(true); - jest.spyOn(LogBoxData, 'addLog'); + jest.mock('../Data/LogBoxData'); mockFilterResult({}); + (LogBoxData.isMessageIgnored: any).mockReturnValue(true); LogBox.install(); @@ -339,11 +317,10 @@ describe('LogBox', () => { }); it('ignores warning module errors that are from LogBox itself', () => { - jest.spyOn(LogBoxData, 'checkWarningFilter'); - jest.spyOn(LogBoxData, 'isLogBoxErrorMessage').mockReturnValue(true); - jest.spyOn(LogBoxData, 'addLog'); + jest.mock('../Data/LogBoxData'); mockFilterResult({}); + (LogBoxData.isLogBoxErrorMessage: any).mockReturnValue(true); LogBox.install(); @@ -352,9 +329,8 @@ describe('LogBox', () => { }); it('ignores logs that are pattern ignored"', () => { - jest.spyOn(LogBoxData, 'checkWarningFilter'); - jest.spyOn(LogBoxData, 'isMessageIgnored').mockReturnValue(true); - jest.spyOn(LogBoxData, 'addLog'); + jest.mock('../Data/LogBoxData'); + (LogBoxData.isMessageIgnored: any).mockReturnValue(true); LogBox.install(); @@ -363,8 +339,8 @@ describe('LogBox', () => { }); it('does not add logs that are from LogBox itself"', () => { - jest.spyOn(LogBoxData, 'isLogBoxErrorMessage').mockReturnValue(true); - jest.spyOn(LogBoxData, 'addLog'); + jest.mock('../Data/LogBoxData'); + (LogBoxData.isLogBoxErrorMessage: any).mockReturnValue(true); LogBox.install(); @@ -373,7 +349,7 @@ describe('LogBox', () => { }); it('ignores logs starting with "(ADVICE)"', () => { - jest.spyOn(LogBoxData, 'addLog'); + jest.mock('../Data/LogBoxData'); LogBox.install(); @@ -382,7 +358,7 @@ describe('LogBox', () => { }); it('does not ignore logs formatted to start with "(ADVICE)"', () => { - jest.spyOn(LogBoxData, 'addLog'); + jest.mock('../Data/LogBoxData'); LogBox.install(); @@ -400,7 +376,7 @@ describe('LogBox', () => { }); it('ignores console methods after uninstalling', () => { - jest.spyOn(LogBoxData, 'addLog'); + jest.mock('../Data/LogBoxData'); LogBox.install(); LogBox.uninstall(); @@ -413,7 +389,7 @@ describe('LogBox', () => { }); it('does not add logs after uninstalling', () => { - jest.spyOn(LogBoxData, 'addLog'); + jest.mock('../Data/LogBoxData'); LogBox.install(); LogBox.uninstall(); @@ -430,7 +406,7 @@ describe('LogBox', () => { }); it('does not add exceptions after uninstalling', () => { - jest.spyOn(LogBoxData, 'addException'); + jest.mock('../Data/LogBoxData'); LogBox.install(); LogBox.uninstall(); @@ -506,80 +482,4 @@ describe('LogBox', () => { 'Custom: after installing for the second time', ); }); - - it('registers errors with component stack as errors by default, when ExceptionManager is registered first', () => { - jest.spyOn(LogBoxData, 'checkWarningFilter'); - jest.spyOn(LogBoxData, 'addLog'); - - ExceptionsManager.installConsoleErrorReporter(); - LogBox.install(); - - console.error( - 'HIT\n at Text (/path/to/Component:30:175)\n at DoesNotUseKey', - ); - - expect(LogBoxData.addLog).toBeCalledWith( - expect.objectContaining({level: 'error'}), - ); - expect(LogBoxData.checkWarningFilter).toBeCalledWith( - 'HIT\n at Text (/path/to/Component:30:175)\n at DoesNotUseKey', - ); - }); - - it('registers errors with component stack as errors by default, when ExceptionManager is registered second', () => { - jest.spyOn(LogBoxData, 'checkWarningFilter'); - jest.spyOn(LogBoxData, 'addLog'); - - LogBox.install(); - ExceptionsManager.installConsoleErrorReporter(); - - console.error( - 'HIT\n at Text (/path/to/Component:30:175)\n at DoesNotUseKey', - ); - - expect(LogBoxData.addLog).toBeCalledWith( - expect.objectContaining({level: 'error'}), - ); - expect(LogBoxData.checkWarningFilter).toBeCalledWith( - 'HIT\n at Text (/path/to/Component:30:175)\n at DoesNotUseKey', - ); - }); - - it('registers errors without component stack as errors by default, when ExceptionManager is registered first', () => { - jest.spyOn(LogBoxData, 'checkWarningFilter'); - jest.spyOn(LogBoxData, 'addException'); - - ExceptionsManager.installConsoleErrorReporter(); - LogBox.install(); - - console.error('HIT'); - - // Errors without a component stack skip the warning filter and - // fall through to the ExceptionManager, which are then reported - // back to LogBox as non-fatal exceptions, in a convuluted dance - // in the most legacy cruft way. - expect(LogBoxData.addException).toBeCalledWith( - expect.objectContaining({originalMessage: 'HIT'}), - ); - expect(LogBoxData.checkWarningFilter).not.toBeCalled(); - }); - - it('registers errors without component stack as errors by default, when ExceptionManager is registered second', () => { - jest.spyOn(LogBoxData, 'checkWarningFilter'); - jest.spyOn(LogBoxData, 'addException'); - - LogBox.install(); - ExceptionsManager.installConsoleErrorReporter(); - - console.error('HIT'); - - // Errors without a component stack skip the warning filter and - // fall through to the ExceptionManager, which are then reported - // back to LogBox as non-fatal exceptions, in a convuluted dance - // in the most legacy cruft way. - expect(LogBoxData.addException).toBeCalledWith( - expect.objectContaining({originalMessage: 'HIT'}), - ); - expect(LogBoxData.checkWarningFilter).not.toBeCalled(); - }); }); diff --git a/packages/react-native/Libraries/LogBox/__tests__/__fixtures__/ReactWarningFixtures.js b/packages/react-native/Libraries/LogBox/__tests__/__fixtures__/ReactWarningFixtures.js index 2d13e41dfe0683..51b85b1fbe1aef 100644 --- a/packages/react-native/Libraries/LogBox/__tests__/__fixtures__/ReactWarningFixtures.js +++ b/packages/react-native/Libraries/LogBox/__tests__/__fixtures__/ReactWarningFixtures.js @@ -30,27 +30,3 @@ export const FragmentWithProp = () => { ); }; - -export const ManualConsoleError = () => { - console.error('Manual console error'); - return ( - - {['foo', 'bar'].map(item => ( - {item} - ))} - - ); -}; - -export const ManualConsoleErrorWithStack = () => { - console.error( - 'Manual console error\n at ManualConsoleErrorWithStack (/path/to/ManualConsoleErrorWithStack:30:175)\n at TestApp', - ); - return ( - - {['foo', 'bar'].map(item => ( - {item} - ))} - - ); -};