Add React integration tests for LogBox

Summary:
This diff adds some integration tests that throw read React errors and asserts on the LogBox data.

Changelog: [Internal]

Reviewed By: motiz88

Differential Revision: D22752147

fbshipit-source-id: eb2e1542524d67558f2450130015164acd4d6093

Libraries/LogBox/__tests__/LogBox-integration-test.js

@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @emails oncall+react_native
+ */
+
+'use strict';
+
+const LogBoxData = require('../Data/LogBoxData');
+const TestRenderer = require('react-test-renderer');
+
+import * as React from 'react';
+
+import {
+ DoesNotUseKey,
+ FragmentWithProp,
+} from './__fixtures__/ReactWarningFixtures';
+
+const installLogBox = () => {
+ const LogBox = require('../LogBox');
+
+ LogBox.install();
+};
+
+const uninstallLogBox = () => {
+ const LogBox = require('../LogBox');
+ LogBox.uninstall();
+};
+
+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),
+ })),
+ };
+ });
+};
+
+describe('LogBox', () => {
+ const {error, warn} = console;
+ const mockError = jest.fn();
+ const mockWarn = jest.fn();
+
+ beforeEach(() => {
+ jest.resetModules();
+ jest.restoreAllMocks();
+
+ mockError.mockClear();
+ mockWarn.mockClear();
+
+ (console: any).error = mockError;
+ (console: any).warn = mockWarn;
+ });
+
+ afterEach(() => {
+ uninstallLogBox();
+ (console: any).error = error;
+ (console: any).warn = warn;
+ });
+
+ it('integrates with React and handles a key error in LogBox', () => {
+ const spy = jest.spyOn(LogBoxData, 'addLog');
+ installLogBox();
+
+ // Spy console.error after LogBox is installed
+ // so we can assert on what React logs.
+ jest.spyOn(console, 'error');
+
+ const output = TestRenderer.create(<DoesNotUseKey />);
+
+ // The key error should always be the highest severity.
+ // In LogBox, we expect these errors to:
+ // - Be added to LogBox, because all errors and warnings are.
+ // - Not call through to console.warn, because they are errors.
+ // - 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.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',
+ );
+ expect(mockError.mock.calls[0][0].startsWith('Warning: ')).toBe(true);
+ });
+
+ it('integrates with React and handles a fragment warning in LogBox', () => {
+ const spy = jest.spyOn(LogBoxData, 'addLog');
+ installLogBox();
+
+ // Spy console.error after LogBox is installed
+ // so we can assert on what React logs.
+ jest.spyOn(console, 'error');
+
+ const output = TestRenderer.create(<FragmentWithProp />);
+
+ // 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.
+ // That means we expect these warnings to:
+ // - Be added to LogBox and displayed collapsed as an error.
+ // - Not call console.warn, because they are errors in the console.
+ // - 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.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',
+ );
+ expect(mockError.mock.calls[0][0].startsWith('Warning: ')).toBe(true);
+ });
+});

Libraries/LogBox/__tests__/__fixtures__/ReactWarningFixtures.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @emails oncall+react_native
+ */
+
+'use strict';
+
+import {Text} from 'react-native';
+import * as React from 'react';
+
+export const DoesNotUseKey = () => {
+ return (
+ <>
+ {['foo', 'bar'].map(item => (
+ <Text>{item}</Text>
+ ))}
+ </>
+ );
+};
+
+export const FragmentWithProp = () => {
+ return (
+ <React.Fragment invalid="prop">
+ {['foo', 'bar'].map(item => (
+ <Text key={item}>{item}</Text>
+ ))}
+ </React.Fragment>
+ );
+};

Libraries/LogBox/__tests__/__snapshots__/LogBox-integration-test.js.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LogBox integrates with React and handles a fragment warning in LogBox: Log added to LogBox 1`] = `
+Array [
+ Object {
+ "category": "Warning: Invalid prop \`%s\` supplied to \`React.Fragment\`. React.Fragment can only have \`key\` and \`children\` props.",
+ "componentStack": Array [
+ Object {
+ "content": "Fragment",
+ "fileName": "ReactWarningFixtures.js",
+ "location": Object {
+ "column": -1,
+ "row": 28,
+ },
+ },
+ ],
+ "level": "warn",
+ "message": Object {
+ "content": "Warning: Invalid prop \`invalid\` supplied to \`React.Fragment\`. React.Fragment can only have \`key\` and \`children\` props.",
+ "substitutions": Array [
+ Object {
+ "length": 7,
+ "offset": 23,
+ },
+ ],
+ },
+ },
+]
+`;
+
+exports[`LogBox integrates with React and handles a fragment warning in LogBox: Log passed to console error 1`] = `
+Array [
+ "Warning: Invalid prop \`invalid\` supplied to \`React.Fragment\`. React.Fragment can only have \`key\` and \`children\` props.
+ in Fragment (at ReactWarningFixtures.js:28)",
+]
+`;
+
+exports[`LogBox integrates with React and handles a fragment warning in LogBox: Log sent from React 1`] = `
+Array [
+ "Warning: Invalid prop \`%s\` supplied to \`React.Fragment\`. React.Fragment can only have \`key\` and \`children\` props.%s",
+ "invalid",
+ "
+ in Fragment (at ReactWarningFixtures.js:28)",
+]
+`;
+
+exports[`LogBox integrates with React and handles a key error in LogBox: Log added to LogBox 1`] = `
+Array [
+ Object {
+ "category": "Warning: Each child in a list should have a unique \\"key\\" prop.%s%s See https://fb.me/react-warning-keys for more information.",
+ "componentStack": Array [
+ Object {
+ "content": "Text",
+ "fileName": "ReactWarningFixtures.js",
+ "location": Object {
+ "column": -1,
+ "row": 20,
+ },
+ },
+ ],
+ "level": "warn",
+ "message": Object {
+ "content": "Warning: Each child in a list should have a unique \\"key\\" prop. See https://fb.me/react-warning-keys for more information.",
+ "substitutions": Array [
+ Object {
+ "length": 0,
+ "offset": 62,
+ },
+ Object {
+ "length": 0,
+ "offset": 62,
+ },
+ ],
+ },
+ },
+]
+`;
+
+exports[`LogBox integrates with React and handles a key error in LogBox: Log passed to console error 1`] = `
+Array [
+ "Warning: Each child in a list should have a unique \\"key\\" prop. See https://fb.me/react-warning-keys for more information.
+ in Text (at ReactWarningFixtures.js:20)",
+]
+`;
+
+exports[`LogBox integrates with React and handles a key error in LogBox: Log sent from React 1`] = `
+Array [
+ "Warning: Each child in a list should have a unique \\"key\\" prop.%s%s See https://fb.me/react-warning-keys for more information.%s",
+ "",
+ "",
+ "
+ in Text (at ReactWarningFixtures.js:20)",
+]
+`;