chore: cleanup comments in the code

Author: bcarroll22

examples/__tests__/input-event.js

@@ -49,15 +49,15 @@ test('It should allow a $ to be in the input when the value is changed', () => {
 
 test('It should not allow letters to be inputted', () => {
   const { input } = setup();
-  expect(input.props.value).toBe(''); // empty before
+  expect(input.props.value).toBe('');
   fireEvent.change(input, { text: 'Good Day' });
-  expect(input.props.value).toBe(''); //empty after
+  expect(input.props.value).toBe('');
 });
 
 test('It should allow the $ to be deleted', () => {
   const { input } = setup();
   fireEvent.change(input, { text: '23' });
-  expect(input.props.value).toBe('$23'); // need to make a change so React registers "" as a change
+  expect(input.props.value).toBe('$23');
   fireEvent.change(input, { text: '' });
   expect(input.props.value).toBe('');
 });

examples/__tests__/react-context.js

@@ -4,19 +4,11 @@ import { Text } from 'react-native';
 import { render } from '../../src';
 import { NameContext, NameProvider, NameConsumer } from '../react-context';
 
-/**
- * Test default values by rendering a context consumer without a
- * matching provider
- */
 test('NameConsumer shows default value', () => {
   const { getByText } = render(<NameConsumer />);
   expect(getByText(/^My Name Is:/).props.children.join('')).toBe('My Name Is: Unknown');
 });
 
-/**
- * To test a component tree that uses a context consumer but not the provider,
- * wrap the tree with a matching provider
- */
 test('NameConsumer shows value from provider', () => {
   const tree = (
     <NameContext.Provider value="C3P0">
@@ -27,10 +19,6 @@ test('NameConsumer shows value from provider', () => {
   expect(getByText(/^My Name Is:/).props.children.join('')).toBe('My Name Is: C3P0');
 });
 
-/**
- * To test a component that provides a context value, render a matching
- * consumer as the child
- */
 test('NameProvider composes full name from first, last', () => {
   const tree = (
     <NameProvider first="Boba" last="Fett">
@@ -41,9 +29,6 @@ test('NameProvider composes full name from first, last', () => {
   expect(getByText(/^Received:/).props.children.join('')).toBe('Received: Boba Fett');
 });
 
-/**
- * A tree containing both a provider and consumer can be rendered normally
- */
 test('NameProvider/Consumer shows name of character', () => {
   const tree = (
     <NameProvider first="Leia" last="Organa">

examples/__tests__/react-navigation.js

@@ -4,7 +4,6 @@ import { createStackNavigator, createAppContainer, withNavigation } from 'react-
 
 import { render, fireEvent } from '../../src';
 
-// React Navigation uses some packages that don't play nice with Jest
 jest.mock('NativeAnimatedHelper').mock('react-native-gesture-handler', () => {
   const View = require('react-native/Libraries/Components/View/View');
   return {
@@ -15,7 +14,6 @@ jest.mock('NativeAnimatedHelper').mock('react-native-gesture-handler', () => {
   };
 });
 
-// Even after the mocks, there are some warning message we'll want to filter out
 console.warn = arg => {
   const warnings = [
     'Calling .measureInWindow()',
@@ -55,8 +53,6 @@ const LocationDisplay = withNavigation(({ navigation }) => (
   <Text testID="location-display">{navigation.state.routeName}</Text>
 ));
 
-// this is a handy function that I would utilize for any component
-// that relies on the navigation being in context
 function renderWithNavigation({ screens = {}, navigatorConfig = {} } = {}) {
   const AppNavigator = createStackNavigator(
     {

examples/__tests__/react-redux.js

@@ -4,7 +4,6 @@ import { createStore } from 'redux';
 import { Provider, connect } from 'react-redux';
 import { render, fireEvent } from '../../src';
 
-// counter.js
 class Counter extends React.Component {
   increment = () => {
     this.props.dispatch({ type: 'INCREMENT' });
@@ -28,13 +27,8 @@ class Counter extends React.Component {
   }
 }
 
-// normally this would be:
-// export default connect(state => ({count: state.count}))(Counter)
-// but for this test we'll give it a variable name
-// because we're doing this all in one file
 const ConnectedCounter = connect(state => ({ count: state.count }))(Counter);
 
-// app.js
 function reducer(state = { count: 0 }, action) {
   switch (action.type) {
     case 'INCREMENT':
@@ -50,27 +44,9 @@ function reducer(state = { count: 0 }, action) {
   }
 }
 
-// normally here you'd do:
-// const store = createStore(reducer)
-// ReactDOM.render(
-//   <Provider store={store}>
-//     <Counter />
-//   </Provider>,
-//   document.getElementById('root'),
-// )
-// but for this test we'll umm... not do that :)
-
-// Now here's what your test will look like:
-
-// this is a handy function that I normally make available for all my tests
-// that deal with connected components.
-// you can provide initialState or the entire store that the ui is rendered with
 function renderWithRedux(ui, { initialState, store = createStore(reducer, initialState) } = {}) {
   return {
     ...render(<Provider store={store}>{ui}</Provider>),
-    // adding `store` to the returned utilities to allow us
-    // to reference it in our tests (just try to avoid using
-    // this to test implementation details).
     store,
   };
 }
@@ -90,7 +66,6 @@ test('can render with redux with custom initial state', () => {
 });
 
 test('can render with redux with custom store', () => {
-  // this is a silly store that can never be changed
   const store = createStore(() => ({ count: 1000 }));
   const { getByTestId, getByText } = renderWithRedux(<ConnectedCounter />, {
     store,

examples/__tests__/update-props.js

@@ -1,14 +1,11 @@
-// This is an example of how to update the props of a rendered component.
-// the basic idea is to simply call `render` again and provide the same container
-// that your first call created for you.
 import React from 'react';
 import { Text, View } from 'react-native';
 import { render } from '../../src';
 
 let idCounter = 1;
 
 class NumberDisplay extends React.Component {
-  id = idCounter++; // to ensure we don't remount a different instance
+  id = idCounter++;
   render() {
     return (
       <View>
@@ -23,7 +20,6 @@ test('calling render with the same component on the same container does not remo
   const { getByTestId, rerender } = render(<NumberDisplay number={1} />);
   expect(getByTestId('number-display').props.children).toEqual(1);
 
-  // re-render the same component with different props
   rerender(<NumberDisplay number={2} />);
   expect(getByTestId('number-display').props.children).toEqual(2);
 

examples/react-hooks.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import 'jest-dom/extend-expect';
 import { Button } from 'react-native';
 
 import { render, fireEvent } from '../';
@@ -24,9 +23,8 @@ test('fireEvent triggers useEffect calls', () => {
   }
   const { getByText } = render(<Counter />);
   const buttonNode = getByText('0');
-  /**/
   effectCb.mockClear();
-  fireEvent.press(buttonNode); /**/
+  fireEvent.press(buttonNode);
   expect(buttonNode.props.children).toEqual('1');
   expect(effectCb).toHaveBeenCalledTimes(1);
 });

src/__tests__/act.js

@@ -16,7 +16,7 @@ class ComponentWithLoader extends React.Component {
   state = { loading: true };
   async componentDidMount() {
     const data = await fetchAMessage();
-    this.setState({ data, loading: false }); // eslint-disable-line
+    this.setState({ data, loading: false });
   }
   render() {
     if (this.state.loading) {

src/__tests__/end-to-end.js

@@ -31,21 +31,17 @@ class Fetch extends React.Component {
 }
 
 test('Fetch makes an API call and displays the greeting when load-greeting is clicked', async () => {
-  // Arrange
   fetch.mockResponseOnce(JSON.stringify({ data: { greeting: 'hello there' } }));
   const url = '/greeting';
   const { container, getByText } = render(<Fetch url={url} />);
 
-  // Act
   fireEvent.press(getByText('Fetch'));
 
   await wait();
 
-  // Assert
   expect(fetch).toHaveBeenCalledTimes(1);
   expect(fetch).toHaveBeenCalledWith(url);
-  // this assertion is funny because if the textContent were not "hello there"
-  // then the `getByText` would throw anyway... 🤔
+
   expect(getByText('hello there').props.children).toEqual('hello there');
   expect(container).toMatchSnapshot();
 });

src/__tests__/fetch.js

@@ -29,10 +29,8 @@ test('login form submits', () => {
 
   const submitButtonNode = getByText('Submit');
 
-  // Act
   fireEvent.press(submitButtonNode);
 
-  // Assert
   expect(handleSubmit).toHaveBeenCalledTimes(1);
   expect(handleSubmit).toHaveBeenCalledWith(fakeUser);
 });

src/__tests__/forms.js

@@ -1,7 +1,5 @@
 import { fuzzyMatches, matches } from '../matches';
 
-// unit tests for text match utils
-
 const node = null;
 const normalizer = str => str;
 

src/__tests__/matches.js

@@ -4,7 +4,7 @@ import { Text } from 'react-native';
 import { render } from '../';
 import { prettyPrint } from '../pretty-print';
 
-test('it prints out the given DOM element tree', () => {
+test('it prints out the given element tree', () => {
   const { container } = render(<Text>Hello World!</Text>);
   expect(prettyPrint(container)).toMatchInlineSnapshot(`
 "<Text>

src/__tests__/pretty-print.js

@@ -5,8 +5,6 @@ import { render } from '../.';
 
 test('find asynchronously finds elements', async () => {
   const {
-    rootInstance,
-
     findByA11yLabel,
     findAllByA11yLabel,
 
@@ -76,11 +74,8 @@ test('find rejects when something cannot be found', async () => {
     findAllByTestId,
   } = render(<View />);
 
-  // I just don't want multiple lines for these.
-  // qo = queryOptions
-  // wo = waitForElementOptions
-  const qo = {}; // query options
-  const wo = { timeout: 10 }; // wait options
+  const qo = {};
+  const wo = { timeout: 10 };
 
   await expect(findByA11yLabel('x', qo, wo)).rejects.toThrow('x');
   await expect(findAllByA11yLabel('x', qo, wo)).rejects.toThrow('x');
@@ -103,6 +98,6 @@ test('find rejects when something cannot be found', async () => {
 
 test('actually works with async code', async () => {
   const { findByTestId, rerender, container } = render(<View />);
-  setTimeout(() => rerender(<Text testID="text">correct dom</Text>), 20);
+  setTimeout(() => rerender(<Text testID="text">correct tree</Text>), 20);
   await expect(findByTestId('text', {}, { container })).resolves.toBeTruthy();
 });

src/__tests__/queries.find.js

@@ -1,14 +1,7 @@
 import React from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 import { render } from '../';
 
-test('renders View', () => {
-  const ref = React.createRef();
-  const { debug } = render(<View ref={ref} />);
-
-  debug(<Text>hi</Text>);
-});
-
 test('renders View', () => {
   const ref = React.createRef();
   const { rootInstance } = render(<View ref={ref} />);

src/__tests__/render.js

@@ -9,7 +9,6 @@ test('rerender will re-render the element', () => {
 
   const message = getByText('hi');
 
-  //  console.log(message.props.children);
   expect(message.props.children).toEqual('hi');
   rerender(<Greeting message="hey" />);
   expect(message.props.children).toEqual('hey');

src/__tests__/rerender.js

@@ -43,14 +43,9 @@ test('unmounts a component', async () => {
   jest.spyOn(console, 'error').mockImplementation(() => {});
   const { unmount, getByText, container } = render(<StopWatch />);
   fireEvent.press(getByText('Start'));
+
   unmount();
-  // hey there reader! You don't need to have an assertion like this one
-  // this is just me making sure that the unmount function works.
-  // You don't need to do this in your apps. Just rely on the fact that this works.
+
   expect(container.toJSON()).toBeNull();
-  // just wait to see if the interval is cleared or not
-  // if it's not, then we'll call setState on an unmounted component
-  // and get an error.
-  // eslint-disable-next-line no-console
   await wait(() => expect(console.error).not.toHaveBeenCalled());
 });