feat: decouple lib from preset

Author: Brandon Carroll

src/__tests__/render.js

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

src/__tests__/stopwatch.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Text, View } from 'react-native';
 
-import { render, fireEvent } from '../';
+import { render, fireEvent, toJSON } from '../';
 
 class StopWatch extends React.Component {
   state = { lapse: 0, running: false };
@@ -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, testRenderer } = render(<StopWatch />);
+  const { unmount, getByTitle, container } = render(<StopWatch />);
   fireEvent.press(getByTitle('Start'));
 
   unmount();
 
-  expect(testRenderer.toJSON()).toBeNull();
+  expect(toJSON(container)).toBeNull();
   await wait(() => expect(console.error).not.toHaveBeenCalled());
 });

src/index.js

@@ -2,24 +2,14 @@ import React from 'react';
 import TR from 'react-test-renderer';
 
 import {
-  configure as configureNTL,
+  toJSON,
   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;
-  },
-});
+import act from './act-compat';
 
 function render(ui, { options = {}, wrapper: WrapperComponent, queries } = {}) {
   const wrapUiIfNeeded = innerElement =>
@@ -34,7 +24,7 @@ function render(ui, { options = {}, wrapper: WrapperComponent, queries } = {}) {
   return {
     testRenderer,
     container: proxyUnsafeProperties(testRenderer.root),
-    debug: () => console.log(prettyPrint(testRenderer.toJSON())),
+    debug: (el = testRenderer.root) => console.log(prettyPrint(toJSON(el))),
     unmount: () => testRenderer.unmount(),
     rerender: rerenderUi => {
       act(() => {

src/lib/__tests__/config.js

@@ -51,5 +51,11 @@ describe('configuration API', () => {
         foo: '123-derived',
       });
     });
+
+    test('asyncWrapper callback exists by default', () => {
+      const callback = jest.fn();
+      getConfig().asyncWrapper(callback);
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
   });
 });

src/lib/__tests__/pretty-print.js

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

src/lib/__tests__/query-helpers.js

@@ -1,10 +1,17 @@
-import { defaultFilter, proxyUnsafeProperties } from '../query-helpers';
+import { configure } from '../config';
+import { validComponentFilter, proxyUnsafeProperties } from '../query-helpers';
 
-test('defaultFilter returns `true` when node.type is in the mocked type list', () => {
-  expect(defaultFilter({ type: 'Text' })).toEqual(true);
+test('validComponentFilter returns `true` when node.type is in the mocked type list', () => {
+  configure({ coreComponents: ['Text'] });
+  expect(validComponentFilter({ type: 'Text' })).toEqual(true);
 });
-test('defaultFilter returns `false` when node.type is not in the mocked type list', () => {
-  expect(defaultFilter({ type: 'Test' })).toEqual(false);
+test('validComponentFilter returns `false` when node.type is not in the mocked type list', () => {
+  configure({ coreComponents: ['Text'] });
+  expect(validComponentFilter({ type: 'Test' })).toEqual(false);
+});
+test('validComponentFilter always returns `true` when no mocked components are provided', () => {
+  configure({ coreComponents: null });
+  expect(validComponentFilter({ type: 'BadComponent' })).toEqual(true);
 });
 
 test('proxyUnsafeProperties ignores what it should', () => {

src/lib/__tests__/to-json.js

@@ -30,5 +30,5 @@ test('it converts to json', () => {
     </ParentComponent>,
   );
 
-  console.log(prettyPrint(toJSON(container)));
+  expect(prettyPrint(toJSON(container))).toMatchSnapshot();
 });

src/lib/config.js

@@ -1,5 +1,6 @@
+/* istanbul ignore next */
 let config = {
-  // no default config in NTL...
+  asyncWrapper: cb => cb(),
 };
 
 function configure(newConfig) {
@@ -16,8 +17,8 @@ function configure(newConfig) {
   };
 }
 
-function getConfig() {
-  return config;
+function getConfig(key) {
+  return key ? config[key] : config;
 }
 
 export { configure, getConfig };

src/lib/index.js

@@ -2,6 +2,8 @@ import { getQueriesForElement } from './get-queries-for-element';
 import * as queries from './queries';
 import * as queryHelpers from './query-helpers';
 
+export * from './config';
+export * from './to-json';
 export * from './queries';
 export * from './wait';
 export * from './wait-for-element';
@@ -12,7 +14,6 @@ export * from './events';
 export * from './get-queries-for-element';
 export * from './query-helpers';
 export * from './pretty-print';
-export { configure } from './config';
 
 export {
   getQueriesForElement as within,

src/lib/pretty-print.js

@@ -1,5 +1,6 @@
 import prettyFormat from 'pretty-format';
 import React from 'react';
+
 const { ReactTestComponent, ReactElement } = prettyFormat.plugins;
 
 function prettyPrint(element, maxLength, options) {

src/lib/queries/display-value.js

@@ -1,4 +1,11 @@
-import { matches, fuzzyMatches, makeNormalizer, buildQueries, getContainer } from './all-utils';
+import {
+  matches,
+  fuzzyMatches,
+  makeNormalizer,
+  buildQueries,
+  getContainer,
+  validComponentFilter,
+} from './all-utils';
 
 function queryAllByDisplayValue(
   testRenderer,
@@ -9,7 +16,7 @@ function queryAllByDisplayValue(
   const matcher = exact ? matches : fuzzyMatches;
   const matchNormalizer = makeNormalizer({ collapseWhitespace, trim, normalizer });
 
-  return Array.from(container.findAll(n => ['TextInput', 'Picker'].includes(n.type)))
+  return Array.from(container.findAll(node => validComponentFilter(node, 'displayValueComponents')))
     .filter(filter)
     .filter(node => {
       if (node.type === 'Picker') {

src/lib/queries/text.js

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

src/lib/queries/title.js

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

src/lib/query-helpers.js

@@ -1,13 +1,13 @@
-import { getCoreComponents } from '../preset/core-components';
-
+import { toJSON } from './to-json';
+import { getConfig } from './config';
 import { prettyPrint } from './pretty-print';
 import { waitForElement } from './wait-for-element';
 import { fuzzyMatches, makeNormalizer, matches } from './matches';
 
 function debugTree(testRenderer) {
   const limit = process.env.DEBUG_PRINT_LIMIT || 7000;
 
-  return prettyPrint(testRenderer.toJSON(), limit);
+  return prettyPrint(toJSON(testRenderer.root), limit);
 }
 
 function getElementError(message, testRenderer) {
@@ -21,8 +21,9 @@ function getMultipleElementsFoundError(message, testRenderer) {
   );
 }
 
-function defaultFilter(node) {
-  return getCoreComponents().includes(node.type);
+function validComponentFilter(node, key = 'coreComponents') {
+  const validComponents = getConfig(key);
+  return validComponents ? validComponents.includes(node.type) : true;
 }
 
 function getContainer(testRenderer) {
@@ -59,7 +60,7 @@ function proxyUnsafeProperties(node) {
         return function(...args) {
           return ref
             .apply(this, args)
-            .filter(defaultFilter)
+            .filter(node => validComponentFilter(node))
             .map(proxyUnsafeProperties);
         };
       } else if (key === 'getProp') {
@@ -148,7 +149,6 @@ function buildQueries(queryAllBy, getMultipleError, getMissingError) {
 
 export {
   buildQueries,
-  defaultFilter,
   getContainer,
   getElementError,
   getMultipleElementsFoundError,
@@ -158,4 +158,5 @@ export {
   queryAllByProp,
   queryByProp,
   proxyUnsafeProperties,
+  validComponentFilter,
 };