3.0.0-beta.5

Author: Brandon Carroll

examples/__tests__/react-intl.js

@@ -39,7 +39,7 @@ const renderWithReactIntl = component => {
 setupTests();
 
 test('it should render FormattedDate and have a formatted pt date', () => {
-  const { baseElement } = renderWithReactIntl(<FormatDateView />);
+  const { testRenderer } = renderWithReactIntl(<FormatDateView />);
 
-  getByText(baseElement, '11/03/2019');
+  getByText(testRenderer, '11/03/2019');
 });

examples/__tests__/react-navigation.js

@@ -51,7 +51,7 @@ function renderWithNavigation({ screens = {}, navigatorConfig = {} } = {}) {
 
   const App = createAppContainer(AppNavigator);
 
-  return { ...render(<App detached />), navigationBaseElement: App };
+  return { ...render(<App detached />), navigationTestRenderer: App };
 }
 
 test('full app rendering/navigating', async () => {

examples/__tests__/update-props.js

@@ -17,7 +17,7 @@ class NumberDisplay extends React.Component {
   }
 }
 
-test('calling render with the same component on the same baseElement does not remount', () => {
+test('calling render with the same component on the same testRenderer does not remount', () => {
   const { getByTestId, rerender } = render(<NumberDisplay number={1} />);
   expect(getByTestId('number-display')).toHaveTextContent(1);
 

src/lib/__tests__/__snapshots__/fetch.js.snap renamed to src/__tests__/__snapshots__/fetch.js.snap

@@ -11,7 +11,7 @@ afterEach(() => {
   console.log.mockRestore();
 });
 
-test('debug pretty prints the baseElement', () => {
+test('debug pretty prints the testRenderer', () => {
   const HelloWorld = () => <Text>Hello World</Text>;
   const { debug } = render(<HelloWorld />);
   debug();

src/lib/__tests__/act.js renamed to src/__tests__/act.js

@@ -2,8 +2,7 @@ import React from 'react';
 import 'jest-native/extend-expect';
 import { Button, Image, Text, TextInput, TouchableHighlight } from 'react-native';
 
-import { render, fireEvent, getEventHandlerName, wait } from '../';
-import { eventMap, NativeEvent } from '../events';
+import { render, fireEvent, eventMap, NativeEvent, getEventHandlerName, wait } from '../';
 
 Object.keys(eventMap).forEach(key => {
   const handlerName = getEventHandlerName(key);

src/lib/__tests__/debug.js renamed to src/__tests__/debug.js

@@ -34,7 +34,7 @@ class Fetch extends React.Component {
 test('Fetch makes an API call and displays the greeting when load-greeting is clicked', async () => {
   fetch.mockResponseOnce(JSON.stringify({ data: { greeting: 'hello there' } }));
   const url = '/greeting';
-  const { baseElement, getByText } = render(<Fetch url={url} />);
+  const { testRenderer, getByText } = render(<Fetch url={url} />);
 
   fireEvent.press(getByText('Fetch'));
 
@@ -44,5 +44,5 @@ test('Fetch makes an API call and displays the greeting when load-greeting is cl
   expect(fetch).toHaveBeenCalledWith(url);
 
   expect(getByText('hello there')).toHaveTextContent('hello there');
-  expect(baseElement).toMatchSnapshot();
+  expect(testRenderer).toMatchSnapshot();
 });

src/lib/__tests__/end-to-end.js renamed to src/__tests__/end-to-end.js

@@ -1,4 +1,4 @@
-import { act } from '..';
+import { act } from '../';
 
 jest.mock('react-test-renderer', () => ({}));
 

src/lib/__tests__/events.js renamed to src/__tests__/events.js

@@ -15,12 +15,12 @@ test('returns container', () => {
 test('renders options.wrapper around node', () => {
   const WrapperComponent = ({ children }) => <View testID="wrapper">{children}</View>;
 
-  const { baseElement, getByTestId } = render(<View testID="inner" />, {
+  const { testRenderer, getByTestId } = render(<View testID="inner" />, {
     wrapper: WrapperComponent,
   });
 
   expect(getByTestId('wrapper')).toBeTruthy();
-  expect(baseElement.toJSON()).toMatchInlineSnapshot(`
+  expect(testRenderer.toJSON()).toMatchInlineSnapshot(`
 <View
   testID="wrapper"
 >

src/lib/__tests__/fetch.js renamed to src/__tests__/fetch.js

@@ -41,11 +41,11 @@ const wait = time => new Promise(resolve => setTimeout(resolve, time));
 
 test('unmounts a component', async () => {
   jest.spyOn(console, 'error').mockImplementation(() => {});
-  const { unmount, getByTitle, baseElement } = render(<StopWatch />);
+  const { unmount, getByTitle, testRenderer } = render(<StopWatch />);
   fireEvent.press(getByTitle('Start'));
 
   unmount();
 
-  expect(baseElement.toJSON()).toBeNull();
+  expect(testRenderer.toJSON()).toBeNull();
   await wait(() => expect(console.error).not.toHaveBeenCalled());
 });

src/lib/__tests__/forms.js renamed to src/__tests__/forms.js

@@ -1 +1,67 @@
+import React from 'react';
+import TR from 'react-test-renderer';
+
+import {
+  configure as configureNTL,
+  fireEvent as rntlFireEvent,
+  getQueriesForElement,
+  NativeEvent,
+  prettyPrint,
+  proxyUnsafeProperties,
+} from './lib';
+import act, { asyncAct } from './act-compat';
+
+configureNTL({
+  asyncWrapper: async cb => {
+    let result;
+    await asyncAct(async () => {
+      result = await cb();
+    });
+    return result;
+  },
+});
+
+function render(ui, { options = {}, wrapper: WrapperComponent } = {}) {
+  const wrapUiIfNeeded = innerElement =>
+    WrapperComponent ? <WrapperComponent>{innerElement}</WrapperComponent> : innerElement;
+
+  let testRenderer;
+
+  act(() => {
+    testRenderer = TR.create(wrapUiIfNeeded(ui), options);
+  });
+
+  return {
+    testRenderer,
+    container: proxyUnsafeProperties(testRenderer.root),
+    debug: () => console.log(prettyPrint(testRenderer.toJSON())),
+    unmount: () => testRenderer.unmount(),
+    rerender: rerenderUi => {
+      act(() => {
+        testRenderer.update(wrapUiIfNeeded(rerenderUi));
+      });
+    },
+    ...getQueriesForElement(testRenderer),
+  };
+}
+
+function fireEvent(...args) {
+  let returnValue;
+  act(() => {
+    returnValue = rntlFireEvent(...args);
+  });
+  return returnValue;
+}
+
+Object.keys(rntlFireEvent).forEach(key => {
+  fireEvent[key] = (...args) => {
+    let returnValue;
+    act(() => {
+      returnValue = rntlFireEvent[key](...args);
+    });
+    return returnValue;
+  };
+});
+
 export * from './lib';
+export { act, fireEvent, render, NativeEvent };

src/lib/__tests__/no-act.js renamed to src/__tests__/no-act.js

@@ -0,0 +1,55 @@
+import { configure, getConfig } from '../config';
+
+describe('configuration API', () => {
+  let originalConfig;
+  beforeEach(() => {
+    // Grab the existing configuration so we can restore
+    // it at the end of the test
+    configure(existingConfig => {
+      originalConfig = existingConfig;
+      // Don't change the existing config
+      return {};
+    });
+  });
+  afterEach(() => {
+    configure(originalConfig);
+  });
+
+  beforeEach(() => {
+    configure({ foo: '123', bar: '456' });
+  });
+
+  describe('getConfig', () => {
+    test('returns existing configuration', () => {
+      const conf = getConfig();
+      expect(conf.foo).toEqual('123');
+    });
+  });
+
+  describe('configure', () => {
+    test('merges a delta rather than replacing the whole config', () => {
+      const conf = getConfig();
+      expect(conf).toMatchObject({ foo: '123', bar: '456' });
+    });
+
+    test('overrides existing values', () => {
+      configure({ foo: '789' });
+      const conf = getConfig();
+      expect(conf.foo).toEqual('789');
+    });
+
+    test('passes existing config out to config function', () => {
+      // Create a new config key based on the value of an existing one
+      configure(existingConfig => ({
+        foo: `${existingConfig.foo}-derived`,
+      }));
+      const conf = getConfig();
+
+      // The new value should be there, and existing values should be
+      // untouched
+      expect(conf).toMatchObject({
+        foo: '123-derived',
+      });
+    });
+  });
+});

src/lib/__tests__/old-act.js renamed to src/__tests__/old-act.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Text, TextInput, View } from 'react-native';
 import cases from 'jest-in-case';
 
-import { render } from '../';
+import { render } from '../../';
 
 cases(
   'getBy* queries throw an error when there are multiple elements returned',

src/lib/__tests__/render.js renamed to src/__tests__/render.js

@@ -1,20 +1,20 @@
 import React from 'react';
 import { Picker, View } from 'react-native';
 
-import { fireEvent, render, queryByProp, queryByTestId } from '../';
+import { fireEvent, render, queryByProp, queryByTestId } from '../../';
 
 test('queryByProp', () => {
-  const { baseElement } = render(
+  const { testRenderer } = render(
     <View>
       <View testID="foo" importantForAccessibility="no" />
       <View importantForAccessibility="no" />
       <View importantForAccessibility="no-hide-descendants" />
     </View>,
   );
 
-  expect(queryByTestId(baseElement, 'foo')).not.toBeNull();
-  expect(queryByProp('importantForAccessibility', baseElement, 'auto')).toBeNull();
-  expect(() => queryByProp('importantForAccessibility', baseElement, /no/)).toThrow(
+  expect(queryByTestId(testRenderer, 'foo')).not.toBeNull();
+  expect(queryByProp('importantForAccessibility', testRenderer, 'auto')).toBeNull();
+  expect(() => queryByProp('importantForAccessibility', testRenderer, /no/)).toThrow(
     /multiple elements/,
   );
 });

src/lib/__tests__/rerender.js renamed to src/__tests__/rerender.js

@@ -1,23 +1,23 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 
-import { render } from '../';
+import { render } from '../../';
 import { prettyPrint } from '../pretty-print';
 
 test('it prints correctly with no children', () => {
-  const { baseElement } = render(<View />);
+  const { testRenderer } = render(<View />);
 
-  expect(prettyPrint(baseElement.toJSON())).toMatchInlineSnapshot(`"[36m<View />[39m"`);
+  expect(prettyPrint(testRenderer.toJSON())).toMatchInlineSnapshot(`"[36m<View />[39m"`);
 });
 
 test('it prints correctly with one child', () => {
-  const { baseElement } = render(
+  const { testRenderer } = render(
     <View>
       <Text>Hello World!</Text>
     </View>,
   );
 
-  expect(prettyPrint(baseElement.toJSON())).toMatchInlineSnapshot(`
+  expect(prettyPrint(testRenderer.toJSON())).toMatchInlineSnapshot(`
 "<View>
   <Text>
     Hello World!
@@ -27,14 +27,14 @@ test('it prints correctly with one child', () => {
 });
 
 test('it prints correctly with multiple children', () => {
-  const { baseElement } = render(
+  const { testRenderer } = render(
     <View>
       <Text>Hello</Text>
       <Text>World!</Text>
     </View>,
   );
 
-  expect(prettyPrint(baseElement.toJSON())).toMatchInlineSnapshot(`
+  expect(prettyPrint(testRenderer.toJSON())).toMatchInlineSnapshot(`
 "<View>
   <Text>
     Hello
@@ -47,11 +47,11 @@ test('it prints correctly with multiple children', () => {
 });
 
 test('it supports truncating the output length', () => {
-  const { baseElement } = render(
+  const { testRenderer } = render(
     <View>
       <Text>Hello World!</Text>
     </View>,
   );
 
-  expect(prettyPrint(baseElement.toJSON(), 5)).toMatch(/\.\.\./);
+  expect(prettyPrint(testRenderer.toJSON(), 5)).toMatch(/\.\.\./);
 });

src/lib/__tests__/stopwatch.js renamed to src/__tests__/stopwatch.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Image, Text, TextInput, View } from 'react-native';
 
-import { render } from '../.';
+import { render } from '../../';
 
 test('find asynchronously finds elements', async () => {
   const {

src/lib/act-compat.js renamed to src/act-compat.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cases from 'jest-in-case';
 import { Button, Image, Text, TextInput, TouchableOpacity } from 'react-native';
 
-import { render } from '../';
+import { render } from '../../';
 import { getDefaultNormalizer } from '../matches';
 
 cases(

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import { render } from '../';
+import { render } from '../../';
 import { waitForElementToBeRemoved } from '../wait-for-element-to-be-removed';
 
 jest.useFakeTimers();

src/lib/__tests__/config.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import { render } from '../';
+import { render } from '../../';
 import { waitForElementToBeRemoved } from '../wait-for-element-to-be-removed';
 
 test('resolves only when the element is removed', async () => {

src/lib/__tests__/get-by-errors.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 
-import { render } from '../';
+import { render } from '../../';
 import { waitForElement } from '../wait-for-element';
 
 test('waits for element to appear in the document', async () => {
@@ -12,7 +12,7 @@ test('waits for element to appear in the document', async () => {
   expect(element).toBeTruthy();
 });
 
-test('waits for element to appear in a specified baseElement', async () => {
+test('waits for element to appear in a specified testRenderer', async () => {
   const { rerender, getByTestId } = render(<View />);
   const promise = waitForElement(() => getByTestId('test'));
   setTimeout(() => rerender(<View testID="test" />));

src/lib/__tests__/misc.js

@@ -1,4 +1,4 @@
-import { wait } from '../wait';
+import { wait } from '../../';
 
 test('it waits for the data to be loaded', async () => {
   const spy = jest.fn();

src/lib/__tests__/pretty-print.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, View } from 'react-native';
 
-import { render, within } from '../';
+import { render, within } from '../../';
 
 test('it works when scoping to a smaller set of elements', () => {
   const { getByTestId } = render(