docs: tag version 3 docs

Author: bcarroll22

docs/api-render.md renamed to docs/api-main.md

@@ -1,7 +1,7 @@
 ---
-id: api-render
-title: Render
-sidebar_label: Render
+id: api-main
+title: Main
+sidebar_label: Main
 ---
 
 ## `render`
@@ -15,7 +15,7 @@ function render(
 ): RenderResult;
 ```
 
-Create a `ReactTestRenderer Instance`.
+Create a `NativeTestInstance`.
 
 ```jsx
 import { render } from 'native-testing-library';
@@ -24,13 +24,17 @@ render(<View />);
 ```
 
 ```javascript
-import { render } from 'native-testing-library';
+import { render, toJSON } from 'native-testing-library';
 
 test('renders a message', () => {
   const { container, getByText } = render(<Text>Hello, World!</Text>);
   expect(getByText('Hello, world!')).toBeTruthy();
-  expect(container.toJSON()).toMatchInlineSnapshot(`
-    <Text>Hello, World!</Text>
+  expect(toJSON(container)).toMatchInlineSnapshot(`
+<View
+  testID="ntl-container"
+>
+  <Text>Hello, World!</Text>
+</View>
   `);
 });
 ```
@@ -83,20 +87,17 @@ const { getByText, getByTestId /* etc */ } = render(<Component />);
 
 ### `container`
 
-The `ReactTestRendererInstance` result from your render. This has helpful methods like `toTree()`
-and `toJSON()`.
-
-> You should rarely use the container. There are very few instances where you need to access the
-> container itself to do something you'd need to in a test.
+`native-testing-library` will create a View to wrap your react component passed to render. This
+ensures that there is always a single child passed to the `AppContainer` component.
 
 ### `baseElement`
 
-This is the root element of your render result. By default, this is what all of your queries will be
-run on, and you could also use it to do any custom searching logic you wanted to..
+This is the root element of your render result. This element is an `AppContainer` from
+`react-native`, and it appears as two nested `Views` at the root of your render.
 
 ### `debug`
 
-This method is a shortcut for `console.log(prettyPrint(container.toJSON()))`.
+This method is a shortcut for `console.log(prettyPrint(toJSON(baseElement)))`.
 
 ```javascript
 import { render } from 'native-testing-library';
@@ -112,6 +113,7 @@ debug();
 //     Hello World
 //   </Text>
 // </View>
+// you can also pass an element: debug(getByText('Hello World'))
 ```
 
 This is a simple wrapper around `prettyPrint` which is also exported.
@@ -136,8 +138,7 @@ rerender(<NumberDisplay number={2} />);
 
 This will cause the rendered component to be unmounted. This is useful for testing what happens when
 your component is removed from the page (like testing that you don't leave event handlers hanging
-around causing memory leaks). Note that you don't need to call this `afterEach` like you do in react
-testing library because these elements aren't being added to a DOM. Use it only as necessary.
+around causing memory leaks).
 
 > This method is a wrapper around ReactTestRenderer.unmount()
 
@@ -147,3 +148,33 @@ import { render } from 'native-testing-library';
 const { unmount } = render(<Login />);
 unmount();
 ```
+
+---
+
+## `cleanup`
+
+Unmounts React trees that were mounted with [render](#render).
+
+```jsx
+import { cleanup, render } from 'native-testing-library';
+
+afterEach(cleanup); // <-- add this
+
+test('renders into document', () => {
+  render(<View />);
+  // ...
+});
+
+// ... more tests ...
+```
+
+**If you don't want to add this to _every single test file_** then we recommend that you configure
+your test framework to run a file before your tests which does this automatically.
+
+---
+
+## `act`
+
+This is a light wrapper around the
+[`react-test-renderer` `act` function](https://reactjs.org/docs/test-renderer.html). All it does is
+forward all arguments to the act function if your version of react supports `act`.

docs/api-queries.md

@@ -4,29 +4,6 @@ title: Queries
 sidebar_label: Queries
 ---
 
-## Using queries
-
-All queries are exported directly from the entry point, but you likely won't need to use them that
-way in most cases. For instance, you can do the following:
-
-```javascript
-import { getByText } from 'native-testing-library';
-
-getByText(container, 'hello world');
-```
-
-but you likely won't need to. Most queries you will run are on the result of render. You can use
-those in this way:
-
-```javascript
-const { getByText } = render(<Text>hello world</Text>);
-
-getByText('hello world');
-```
-
-This page is written in the format of the first example because it is documentation for the query
-API, not documentation for the render result.
-
 ## Variants
 
 > `getBy` queries are shown by default in the [query documentation](#queries) below.
@@ -85,7 +62,7 @@ See [TextMatch](#textmatch) for documentation on what can be passed to a query.
 
 ```typescript
 getByHintText(
-  testRenderer: ReactTestRendererInstance,
+  container: ReactTestRenderer | NativeTestInstance,
   match: TextMatch,
   options?: {
     exact?: boolean = true,
@@ -114,7 +91,7 @@ getByHintText('summary'); // returns the View node
 
 ```typescript
 getByLabelText(
-  testRenderer: ReactTestRendererInstance,
+  container: ReactTestRenderer | NativeTestInstance,
   match: TextMatch,
   options?: {
     exact?: boolean = true,
@@ -153,7 +130,7 @@ getByLabelText('username'); // returns the TextInput node
 
 ```typescript
 getByRole(
-  testRenderer: ReactTestRendererInstance,
+  container: ReactTestRenderer | NativeTestInstance,
   match: TextMatch,
   options?: {
     selector?: SelectorFn,
@@ -181,7 +158,7 @@ getByRole('summary'); // returns the View node
 
 ```typescript
 getByPlaceholderText(
-  testRenderer: ReactTestRendererInstance,
+  container: ReactTestRenderer | NativeTestInstance,
   match: TextMatch,
   options?: {
     exact?: boolean = true,
@@ -209,7 +186,7 @@ getByPlaceholderText('Username'); // returns the TextInput node
 
 ```typescript
 getByText(
-  testRenderer: ReactTestRendererInstance,
+  container: ReactTestRenderer | NativeTestInstance,
   match: TextMatch,
   options?: {
     exact?: boolean = true,
@@ -238,7 +215,7 @@ getByText(/about/i); // returns the Text node
 
 ```typescript
 getByTitle(
-  testRenderer: ReactTestRendererInstance,
+  container: ReactTestRenderer | NativeTestInstance,
   match: TextMatch,
   options?: {
     exact?: boolean = true,
@@ -266,7 +243,7 @@ getByTitle(/about/i); // returns the Button node
 
 ```typescript
 getByValue(
-  testRenderer: ReactTestRendererInstance,
+  container: ReactTestRenderer | NativeTestInstance,
   match: TextMatch,
   options?: {
     exact?: boolean = true,
@@ -294,7 +271,7 @@ getByValue(/about/i); // returns the Input node
 
 ```typescript
 getByTestId(
-  testRenderer: ReactTestRendererInstance,
+  container: ReactTestRenderer | NativeTestInstance,
   match: TextMatch,
   options?: {
     trim?: boolean = true,

docs/intro.md

@@ -1,7 +1,7 @@
 ---
 id: intro
 title: Introduction
-sidebar_label: Intro
+sidebar_label: Introduction
 ---
 
 ## The problem

docs/setup.md

@@ -24,8 +24,8 @@ file that re-exports everything from `native-testing-library`. You can replace
 [below](#configuring-jest-with-test-utils) for a way to make your test util file accessible without
 using relative paths.
 
-The example below sets up data providers using the [`wrapper`](api-render.md#render-options) option
-to `render`.
+The example below sets up data providers using the [`wrapper`](api-main.md#render-options) option to
+`render`.
 
 ```diff
 // my-component.test.js

website/pages/en/versions.js

@@ -33,10 +33,12 @@ function Versions(props) {
               <tr>
                 <th>{latestVersion}</th>
                 <td>
-                  <a href="">Documentation</a>
+                  <a href="/docs/intro">Documentation</a>
                 </td>
                 <td>
-                  <a href="">Release Notes</a>
+                  <a href="https://github.com/testing-library/native-testing-library/releases/latest">
+                    Changelog
+                  </a>
                 </td>
               </tr>
             </tbody>
@@ -45,6 +47,17 @@ function Versions(props) {
             This is the version that is configured automatically when you first install this
             project.
           </p>
+          <h3 id="latest">Next version</h3>
+          <table className="versions">
+            <tbody>
+              <tr>
+                <th>next</th>
+                <td>
+                  <a href="/docs/next/intro">Documentation</a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
           <h3 id="archive">Past Versions</h3>
           <table className="versions">
             <tbody>
@@ -56,7 +69,7 @@ function Versions(props) {
                       <td>
                         {/* You are supposed to fill this href by yourself
                         Example: href={`docs/${version}/doc.html`} */}
-                        <a href={`docs/${version}/doc.html`}>Documentation</a>
+                        <a href={`docs/${version}/intro`}>Documentation</a>
                       </td>
                       <td>
                         <a href={`${repoUrl}/releases/tag/v${version}`}>Changelog</a>

website/sidebars.json

@@ -8,14 +8,7 @@
       "guiding-principles",
       "cheat-sheet"
     ],
-    "API": [
-      "api-queries",
-      "api-events",
-      "api-async",
-      "api-helpers",
-      "api-render",
-      "api-act"
-    ],
+    "API": ["api-main", "api-queries", "api-events", "api-async", "api-helpers"],
     "Ecosystem": ["ecosystem-jest-native", "ecosystem-jest-preset"]
   },
   "recipes": {

website/siteConfig.js

@@ -21,7 +21,7 @@
 //];
 
 const siteConfig = {
-  title: 'React Native Testing Library', // Title for your website.
+  title: 'Native Testing Library', // Title for your website.
   tagline:
     'Simple and complete React Native testing utilities that encourage good testing practices.',
   url: 'https://native-testing-library.com', // Your website URL

website/versioned_docs/version-3.0.0/api-act.md

@@ -0,0 +1,12 @@
+---
+id: version-3.0.0-api-act
+title: Act
+sidebar_label: Act
+original_id: api-act
+---
+
+## `act`
+
+This is a light wrapper around the
+[`react-test-renderer` `act` function](https://reactjs.org/docs/test-renderer.html). All it does is
+forward all arguments to the act function if your version of react supports `act`.