feat: mostly the same api as DTL

Author: Brandon Carroll

babel.config.js

@@ -1,3 +1,8 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  overrides: [
+    {
+      compact: false,
+    },
+  ],
 };

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 { container } = renderWithReactIntl(<FormatDateView />);
+  const { baseElement } = renderWithReactIntl(<FormatDateView />);
 
-  getByText(container, '11/03/2019');
+  getByText(baseElement, '11/03/2019');
 });

examples/__tests__/react-navigation.js

@@ -51,7 +51,7 @@ function renderWithNavigation({ screens = {}, navigatorConfig = {} } = {}) {
 
   const App = createAppContainer(AppNavigator);
 
-  return { ...render(<App detached />), navigationContainer: App };
+  return { ...render(<App detached />), navigationBaseElement: 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 container does not remount', () => {
+test('calling render with the same component on the same baseElement does not remount', () => {
   const { getByTestId, rerender } = render(<NumberDisplay number={1} />);
   expect(getByTestId('number-display')).toHaveTextContent(1);
 

src/lib/__tests__/debug.js

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

src/lib/__tests__/events.js

@@ -13,9 +13,9 @@ Object.keys(eventMap).forEach(key => {
 
     config.validTargets.forEach(element => {
       const handler = jest.fn();
-      const { baseElement } = render(React.createElement(element, { [handlerName]: handler }));
+      const { container } = render(React.createElement(element, { [handlerName]: handler }));
 
-      fireEvent[key](baseElement);
+      fireEvent[key](container);
 
       expect(handler).toHaveBeenCalledTimes(1);
     });
@@ -24,8 +24,8 @@ Object.keys(eventMap).forEach(key => {
 
 test('onChange works', () => {
   const handleChange = jest.fn();
-  const { baseElement } = render(<TextInput onChange={handleChange} />);
-  fireEvent.change(baseElement, { target: { value: 'a' } });
+  const { container } = render(<TextInput onChange={handleChange} />);
+  fireEvent.change(container, { target: { value: 'a' } });
   expect(handleChange).toHaveBeenCalledTimes(1);
 });
 
@@ -67,9 +67,9 @@ test('assigns target properties', async () => {
 
 test('calling `fireEvent` directly works too', () => {
   const handleEvent = jest.fn();
-  const { baseElement } = render(<Button onPress={handleEvent} title="test" />);
+  const { container } = render(<Button onPress={handleEvent} title="test" />);
 
-  fireEvent(baseElement, new NativeEvent('press'));
+  fireEvent(container, new NativeEvent('press'));
   expect(handleEvent).toBeCalledTimes(1);
 });
 
@@ -78,8 +78,8 @@ test('calling a custom event works as well', () => {
   const onMyEvent = jest.fn(({ nativeEvent }) => expect(nativeEvent).toEqual({ value: 'testing' }));
   const MyComponent = ({ onMyEvent }) => <TextInput value="test" onChange={onMyEvent} />;
 
-  const { baseElement } = render(<MyComponent onMyEvent={onMyEvent} />);
-  fireEvent(baseElement, new NativeEvent('myEvent', event));
+  const { container } = render(<MyComponent onMyEvent={onMyEvent} />);
+  fireEvent(container, new NativeEvent('myEvent', event));
 
   expect(onMyEvent).toHaveBeenCalledWith({
     nativeEvent: { value: 'testing' },

src/lib/__tests__/fetch.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 { container, getByText } = render(<Fetch url={url} />);
+  const { baseElement, 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(container).toMatchSnapshot();
+  expect(baseElement).toMatchSnapshot();
 });

src/lib/__tests__/misc.js

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

src/lib/__tests__/pretty-print.js

@@ -5,19 +5,19 @@ import { render } from '../';
 import { prettyPrint } from '../pretty-print';
 
 test('it prints correctly with no children', () => {
-  const { container } = render(<View />);
+  const { baseElement } = render(<View />);
 
-  expect(prettyPrint(container.toJSON())).toMatchInlineSnapshot(`"[36m<View />[39m"`);
+  expect(prettyPrint(baseElement.toJSON())).toMatchInlineSnapshot(`"[36m<View />[39m"`);
 });
 
 test('it prints correctly with one child', () => {
-  const { container } = render(
+  const { baseElement } = render(
     <View>
       <Text>Hello World!</Text>
     </View>,
   );
 
-  expect(prettyPrint(container.toJSON())).toMatchInlineSnapshot(`
+  expect(prettyPrint(baseElement.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 { container } = render(
+  const { baseElement } = render(
     <View>
       <Text>Hello</Text>
       <Text>World!</Text>
     </View>,
   );
 
-  expect(prettyPrint(container.toJSON())).toMatchInlineSnapshot(`
+  expect(prettyPrint(baseElement.toJSON())).toMatchInlineSnapshot(`
 "<View>
   <Text>
     Hello
@@ -47,11 +47,11 @@ test('it prints correctly with multiple children', () => {
 });
 
 test('it supports truncating the output length', () => {
-  const { container } = render(
+  const { baseElement } = render(
     <View>
       <Text>Hello World!</Text>
     </View>,
   );
 
-  expect(prettyPrint(container.toJSON(), 5)).toMatch(/\.\.\./);
+  expect(prettyPrint(baseElement.toJSON(), 5)).toMatch(/\.\.\./);
 });

src/lib/__tests__/render.js

@@ -3,24 +3,24 @@ import { View } from 'react-native';
 import { render } from '../';
 
 test('renders View', () => {
-  const { baseElement } = render(<View />);
-  expect(baseElement).not.toBeNull();
+  const { container } = render(<View />);
+  expect(container).not.toBeNull();
 });
 
-test('returns baseElement', () => {
-  const { baseElement } = render(<View />);
-  expect(baseElement).toBeTruthy();
+test('returns container', () => {
+  const { container } = render(<View />);
+  expect(container).toBeTruthy();
 });
 
 test('renders options.wrapper around node', () => {
   const WrapperComponent = ({ children }) => <View testID="wrapper">{children}</View>;
 
-  const { container, getByTestId } = render(<View testID="inner" />, {
+  const { baseElement, getByTestId } = render(<View testID="inner" />, {
     wrapper: WrapperComponent,
   });
 
   expect(getByTestId('wrapper')).toBeTruthy();
-  expect(container.toJSON()).toMatchInlineSnapshot(`
+  expect(baseElement.toJSON()).toMatchInlineSnapshot(`
 <View
   testID="wrapper"
 >

src/lib/__tests__/stopwatch.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, container } = render(<StopWatch />);
+  const { unmount, getByTitle, baseElement } = render(<StopWatch />);
   fireEvent.press(getByTitle('Start'));
 
   unmount();
 
-  expect(container.toJSON()).toBeNull();
+  expect(baseElement.toJSON()).toBeNull();
   await wait(() => expect(console.error).not.toHaveBeenCalled());
 });

src/lib/__tests__/wait-for-element-to-be-removed.fake-timers.js

@@ -25,9 +25,9 @@ test('requires an unempty array of elements to exist first', () => {
 });
 
 test('times out after 4500ms by default', () => {
-  const { baseElement } = render(<View />);
+  const { container } = render(<View />);
   const promise = expect(
-    waitForElementToBeRemoved(() => baseElement),
+    waitForElementToBeRemoved(() => container),
   ).rejects.toThrowErrorMatchingInlineSnapshot(`"Timed out in waitForElementToBeRemoved."`);
 
   jest.advanceTimersByTime(4501);

src/lib/__tests__/wait-for-element.js

@@ -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 container', async () => {
+test('waits for element to appear in a specified baseElement', async () => {
   const { rerender, getByTestId } = render(<View />);
   const promise = waitForElement(() => getByTestId('test'));
   setTimeout(() => rerender(<View testID="test" />));

src/lib/get-queries-for-element.js

@@ -1,9 +1,9 @@
 import * as defaultQueries from './queries';
 
-function getQueriesForElement(container, queries = defaultQueries) {
+function getQueriesForElement(baseElement, queries = defaultQueries) {
   return Object.keys(queries).reduce((helpers, key) => {
     const fn = queries[key];
-    helpers[key] = fn.bind(null, container);
+    helpers[key] = fn.bind(null, baseElement);
     return helpers;
   }, {});
 }

src/lib/index.js

@@ -12,23 +12,23 @@ function render(ui, { options = {}, wrapper: WrapperComponent } = {}) {
   const wrapUiIfNeeded = innerElement =>
     WrapperComponent ? <WrapperComponent>{innerElement}</WrapperComponent> : innerElement;
 
-  let container = {};
+  let baseElement = {};
 
   act(() => {
-    container = TR.create(wrapUiIfNeeded(ui), options);
+    baseElement = TR.create(wrapUiIfNeeded(ui), options);
   });
 
   return {
-    container,
-    baseElement: queryHelpers.proxyUnsafeProperties(container.root),
-    debug: () => console.log(prettyPrint(container.toJSON())),
-    unmount: () => container.unmount(),
+    baseElement,
+    container: queryHelpers.proxyUnsafeProperties(baseElement.root),
+    debug: () => console.log(prettyPrint(baseElement.toJSON())),
+    unmount: () => baseElement.unmount(),
     rerender: rerenderUi => {
       act(() => {
-        container.update(wrapUiIfNeeded(rerenderUi));
+        baseElement.update(wrapUiIfNeeded(rerenderUi));
       });
     },
-    ...getQueriesForElement(container),
+    ...getQueriesForElement(baseElement),
   };
 }
 

src/lib/queries/display-value.js

@@ -1,15 +1,15 @@
-import { matches, fuzzyMatches, makeNormalizer, buildQueries, getBaseElement } from './all-utils';
+import { matches, fuzzyMatches, makeNormalizer, buildQueries, getContainer } from './all-utils';
 
 function queryAllByDisplayValue(
-  container,
+  baseElement,
   value,
   { filter = n => n, exact = true, collapseWhitespace, trim, normalizer } = {},
 ) {
-  const baseElement = getBaseElement(container);
+  const container = getContainer(baseElement);
   const matcher = exact ? matches : fuzzyMatches;
   const matchNormalizer = makeNormalizer({ collapseWhitespace, trim, normalizer });
 
-  return Array.from(baseElement.findAll(n => ['TextInput', 'Picker'].includes(n.type)))
+  return Array.from(container.findAll(n => ['TextInput', 'Picker'].includes(n.type)))
     .filter(filter)
     .filter(node => {
       if (node.type === 'Picker') {

src/lib/queries/role.js

@@ -1,4 +1,4 @@
-import { buildQueries, getBaseElement } from './all-utils';
+import { buildQueries, getContainer } from './all-utils';
 
 const validRoles = [
   'adjustable',
@@ -34,11 +34,11 @@ const validTraits = [
   'text',
 ];
 
-function queryAllByRole(container, value, { filter = n => n } = {}) {
-  const baseElement = getBaseElement(container);
+function queryAllByRole(baseElement, value, { filter = n => n } = {}) {
+  const container = getContainer(baseElement);
 
-  const roleElements = baseElement.findAll(c => c.props.accessibilityRole);
-  const traitElements = baseElement.findAll(c => c.props.accessibilityTraits);
+  const roleElements = container.findAll(c => c.props.accessibilityRole);
+  const traitElements = container.findAll(c => c.props.accessibilityTraits);
 
   return [...roleElements, ...traitElements].filter(filter).filter(node => {
     const role = node.getProp('accessibilityRole');

src/lib/queries/text.js

@@ -4,19 +4,19 @@ import {
   makeNormalizer,
   getNodeText,
   buildQueries,
-  getBaseElement,
+  getContainer,
 } from './all-utils';
 
 function queryAllByText(
-  container,
+  baseElement,
   text,
   { filter = n => n, exact = true, collapseWhitespace, trim, normalizer } = {},
 ) {
-  const baseElement = getBaseElement(container);
+  const container = getContainer(baseElement);
   const matcher = exact ? matches : fuzzyMatches;
   const matchNormalizer = makeNormalizer({ collapseWhitespace, trim, normalizer });
 
-  return Array.from(baseElement.findAll(n => ['Button', 'TextInput', 'Text'].includes(n.type)))
+  return Array.from(container.findAll(n => ['Button', 'TextInput', 'Text'].includes(n.type)))
     .filter(filter)
     .filter(node => matcher(getNodeText(node), node, text, matchNormalizer));
 }

src/lib/queries/title.js

@@ -1,15 +1,15 @@
-import { buildQueries, matches, fuzzyMatches, makeNormalizer, getBaseElement } from './all-utils';
+import { buildQueries, matches, fuzzyMatches, makeNormalizer, getContainer } from './all-utils';
 
 function queryAllByTitle(
-  container,
+  baseElement,
   value,
   { filter = n => n, exact = true, collapseWhitespace, trim, normalizer } = {},
 ) {
-  const baseElement = getBaseElement(container);
+  const container = getContainer(baseElement);
   const matcher = exact ? matches : fuzzyMatches;
   const matchNormalizer = makeNormalizer({ collapseWhitespace, trim, normalizer });
 
-  return Array.from(baseElement.findAll(n => ['Button', 'RefreshControl'].includes(n.type)))
+  return Array.from(container.findAll(n => ['Button', 'RefreshControl'].includes(n.type)))
     .filter(filter)
     .filter(node => matcher(node.getProp('title'), node, value, matchNormalizer));
 }