refactor baseElement/container

Author: bcarroll22

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

mockComponent.js

@@ -6,15 +6,15 @@ import { NativeEvent } from '../events';
 
 test('onChange works', () => {
   const handleChange = jest.fn();
-  const { baseElement } = render(<TextInput onChange={handleChange} />);
-  fireEvent.change(baseElement, { target: { value: 'a' } });
+  const { rootInstance } = render(<TextInput onChange={handleChange} />);
+  fireEvent.change(rootInstance, { target: { value: 'a' } });
   expect(handleChange).toHaveBeenCalledTimes(1);
 });
 
 test('calling `fireEvent` directly works too', () => {
   const handleEvent = jest.fn();
-  const { baseElement } = render(<Button onPress={handleEvent} title="test" />);
-  fireEvent(baseElement, new NativeEvent('press'));
+  const { rootInstance } = render(<Button onPress={handleEvent} title="test" />);
+  fireEvent(rootInstance, new NativeEvent('press'));
 });
 
 test('calling a handler when there is no valid target throws', () => {

src/__tests__/events.js

@@ -5,7 +5,7 @@ import { render } from '../.';
 
 test('find asynchronously finds elements', async () => {
   const {
-    baseElement,
+    rootInstance,
 
     findByA11yLabel,
     findAllByA11yLabel,
@@ -102,7 +102,7 @@ test('find rejects when something cannot be found', async () => {
 });
 
 test('actually works with async code', async () => {
-  const { container, findByTestId, rerender } = render(<View />);
+  const { findByTestId, rerender, container } = render(<View />);
   setTimeout(() => rerender(<Text testID="text">correct dom</Text>), 20);
   await expect(findByTestId('text', {}, { container })).resolves.toBeTruthy();
 });

src/__tests__/queries.find.js

@@ -4,13 +4,13 @@ import { render } from '../';
 
 test('renders View', () => {
   const ref = React.createRef();
-  const { baseElement } = render(<View ref={ref} />);
-  expect(baseElement.instance).toBe(ref.current);
+  const { rootInstance } = render(<View ref={ref} />);
+  expect(rootInstance.instance).toBe(ref.current);
 });
 
-test('returns baseElement', () => {
-  const { baseElement } = render(<View />);
-  expect(baseElement).toBeTruthy();
+test('returns rootInstance', () => {
+  const { rootInstance } = render(<View />);
+  expect(rootInstance).toBeTruthy();
 });
 
 test('renders options.wrapper around node', () => {

src/__tests__/render.js

@@ -12,7 +12,7 @@ import * as defaultQueries from './queries';
 function getQueriesForElement(container, queries = defaultQueries) {
   return Object.keys(queries).reduce((helpers, key) => {
     const fn = queries[key];
-    helpers[key] = fn.bind(null, { testInstance: container, container: container.root });
+    helpers[key] = fn.bind(null, { container: container, rootInstance: container.root });
     return helpers;
   }, {});
 }

src/get-queries-for-element.js

@@ -12,23 +12,23 @@ function render(ui, { options = {}, wrapper: WrapperComponent } = {}) {
   const wrapUiIfNeeded = innerElement =>
     WrapperComponent ? <WrapperComponent>{innerElement}</WrapperComponent> : innerElement;
 
-  let instance = {};
+  let container = {};
 
   act(() => {
-    instance = TR.create(wrapUiIfNeeded(ui), options);
+    container = TR.create(wrapUiIfNeeded(ui), options);
   });
 
   return {
-    baseElement: instance.root,
-    container: instance,
-    debug: (el = instance) => console.log(prettyPrint(el.toJSON())),
-    unmount: () => instance.unmount(),
+    container,
+    rootInstance: container.root,
+    debug: (el = container) => console.log(prettyPrint(el.toJSON())),
+    unmount: () => container.unmount(),
     rerender: rerenderUi => {
-      instance.update(wrapUiIfNeeded(rerenderUi));
+      container.update(wrapUiIfNeeded(rerenderUi));
       // Intentionally do not return anything to avoid unnecessarily complicating the API.
       // folks can use all the same utilities we return in the first place that are bound to the container
     },
-    ...getQueriesForElement(instance),
+    ...getQueriesForElement(container),
   };
 }
 

src/index.js

@@ -18,15 +18,15 @@ const queryByA11yRole = queryByProp.bind(null, 'accessibilityRole');
 const queryAllByA11yRole = queryAllByProp.bind(null, 'accessibilityRole');
 
 function queryAllByText(
-  { container },
+  { rootInstance },
   text,
   { types = [Text, TextInput], exact = true, collapseWhitespace, trim, normalizer } = {},
 ) {
   const matcher = exact ? matches : fuzzyMatches;
   const matchNormalizer = makeNormalizer({ collapseWhitespace, trim, normalizer });
 
   const baseArray = types.reduce(
-    (accumulator, currentValue) => [...accumulator, ...container.findAllByType(currentValue)],
+    (accumulator, currentValue) => [...accumulator, ...rootInstance.findAllByType(currentValue)],
     [],
   );
 
@@ -42,10 +42,10 @@ function queryByText(...args) {
 // 1. The error messages are specific to each one and depend on arguments
 // 2. The stack trace will look better because it'll have a helpful method name.
 
-function getAllByTestId({ container, testInstance }, id, ...rest) {
-  const els = queryAllByTestId({ container, testInstance }, id, ...rest);
+function getAllByTestId({ rootInstance, container }, id, ...rest) {
+  const els = queryAllByTestId({ rootInstance, container }, id, ...rest);
   if (!els.length) {
-    throw getElementError(`Unable to find an element with the testID: ${id}`, testInstance);
+    throw getElementError(`Unable to find an element with the testID: ${id}`, container);
   }
   return els;
 }
@@ -54,13 +54,10 @@ function getByTestId(...args) {
   return firstResultOrNull(getAllByTestId, ...args);
 }
 
-function getAllByA11yRole({ container, testInstance }, value, ...rest) {
-  const els = queryAllByA11yRole({ container, testInstance }, value, ...rest);
+function getAllByA11yRole({ rootInstance, container }, value, ...rest) {
+  const els = queryAllByA11yRole({ rootInstance, container }, value, ...rest);
   if (!els.length) {
-    throw getElementError(
-      `Unable to find an element by accessibilityRole="${value}".`,
-      testInstance,
-    );
+    throw getElementError(`Unable to find an element by accessibilityRole="${value}".`, container);
   }
   return els;
 }
@@ -69,10 +66,10 @@ function getByA11yRole(...args) {
   return firstResultOrNull(getAllByA11yRole, ...args);
 }
 
-function getAllByValue({ container, testInstance }, value, ...rest) {
-  const els = queryAllByValue({ container, testInstance }, value, ...rest);
+function getAllByValue({ rootInstance, container }, value, ...rest) {
+  const els = queryAllByValue({ rootInstance, container }, value, ...rest);
   if (!els.length) {
-    throw getElementError(`Unable to find an element with the value: ${value}.`, testInstance);
+    throw getElementError(`Unable to find an element with the value: ${value}.`, container);
   }
   return els;
 }
@@ -81,13 +78,10 @@ function getByValue(...args) {
   return firstResultOrNull(getAllByValue, ...args);
 }
 
-function getAllByA11yLabel({ container, testInstance }, text, ...rest) {
-  const els = queryAllByA11yLabel({ container, testInstance }, text, ...rest);
+function getAllByA11yLabel({ rootInstance, container }, text, ...rest) {
+  const els = queryAllByA11yLabel({ rootInstance, container }, text, ...rest);
   if (!els.length) {
-    throw getElementError(
-      `Unable to find an element by accessibilityLabel="${text}"`,
-      testInstance,
-    );
+    throw getElementError(`Unable to find an element by accessibilityLabel="${text}"`, container);
   }
   return els;
 }
@@ -96,12 +90,12 @@ function getByA11yLabel(...args) {
   return firstResultOrNull(getAllByA11yLabel, ...args);
 }
 
-function getAllByPlaceholder({ container, testInstance }, text, ...rest) {
-  const els = queryAllByPlaceholder({ container, testInstance }, text, ...rest);
+function getAllByPlaceholder({ rootInstance, container }, text, ...rest) {
+  const els = queryAllByPlaceholder({ rootInstance, container }, text, ...rest);
   if (!els.length) {
     throw getElementError(
       `Unable to find an element with the placeholder text of: ${text}`,
-      testInstance,
+      container,
     );
   }
   return els;
@@ -111,12 +105,12 @@ function getByPlaceholder(...args) {
   return firstResultOrNull(getAllByPlaceholder, ...args);
 }
 
-function getAllByText({ container, testInstance }, text, ...rest) {
-  const els = queryAllByText({ container, testInstance }, text, ...rest);
+function getAllByText({ rootInstance, container }, text, ...rest) {
+  const els = queryAllByText({ rootInstance, container }, text, ...rest);
   if (!els.length) {
     throw getElementError(
       `Unable to find an element with the text: ${text}. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.`,
-      testInstance,
+      container,
     );
   }
   return els;
@@ -127,9 +121,9 @@ function getByText(...args) {
 }
 
 function makeFinder(getter) {
-  return (defaultInstance, text, options, waitForElementOptions) =>
+  return (testInstance, text, options, waitForElementOptions) =>
     waitForElement(
-      (instance = defaultInstance) => getter(instance, text, options),
+      (instance = testInstance) => getter(instance, text, options),
       waitForElementOptions,
     );
 }

src/queries.js

@@ -66,20 +66,19 @@ function defaultFilter(node) {
 
 function queryAllByProp(
   attribute,
-  { container, testInstance },
+  { container, rootInstance },
   text,
   { filter, exact = true, collapseWhitespace, trim, normalizer } = {},
 ) {
   const matcher = exact ? matches : fuzzyMatches;
   const matchNormalizer = makeNormalizer({ collapseWhitespace, trim, normalizer });
-
-  const allNodes = Array.from(container.findAll(c => c.props[attribute]));
+  const allNodes = Array.from(rootInstance.findAll(c => c.props[attribute]));
 
   return (
     allNodes
       // Then make sure to only match the odd numbered ones
       .filter((node, index) => (filter ? filter(node, index) : defaultFilter(node, index)))
-      .filter(node => matcher(node.props[attribute], container, text, matchNormalizer))
+      .filter(node => matcher(node.props[attribute], rootInstance, text, matchNormalizer))
   );
 }
 

src/query-helpers.js

@@ -22,7 +22,9 @@ function waitForElement(callback, { container, interval = 50, timeout = 4500 } =
 
     function onMutation() {
       try {
-        const result = container ? callback({ container: container.root }) : callback();
+        const result = container
+          ? callback({ container, rootInstance: container.root })
+          : callback();
         if (result) {
           onDone(null, result);
         }