From dfb01b7d12c1d76830a8bdd5656d4544ca9bb65e Mon Sep 17 00:00:00 2001
From: Mohammad Kermani <98kermani@gmail.com>
Date: Fri, 14 Aug 2020 02:23:04 +0430
Subject: [PATCH 1/7] add migrate-from-enzyme.md

---
 docs/preact-testing-library/learn.md          |  1 +
 .../migrate-from-enzyme.md                    | 35 +++++++++++++++++++
 website/sidebars.json                         |  1 +
 3 files changed, 37 insertions(+)
 create mode 100644 docs/react-testing-library/migrate-from-enzyme.md

diff --git a/docs/preact-testing-library/learn.md b/docs/preact-testing-library/learn.md
index 5b7b31166..5a7ef635c 100644
--- a/docs/preact-testing-library/learn.md
+++ b/docs/preact-testing-library/learn.md
@@ -23,6 +23,7 @@ If you're still hungry for more at this point than checkout:
 - The react-testing-library:
   - [API](../react-testing-library/api.md)
   - [Example](../react-testing-library/example-intro.md)
+  - [Migrate from Enzyme](../react-testing-library/migrate-from-enzyme.md)
   - [Sandbox](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples)
   - [FAQ](../react-testing-library/faq.md)
 - This YouTube video by LevelUpTuts called
diff --git a/docs/react-testing-library/migrate-from-enzyme.md b/docs/react-testing-library/migrate-from-enzyme.md
new file mode 100644
index 000000000..e4c988ba3
--- /dev/null
+++ b/docs/react-testing-library/migrate-from-enzyme.md
@@ -0,0 +1,35 @@
+---
+id: migrate
+title: Migrate from Enzyme
+sidebar_label: Migrate from Enzyme
+---
+This page is for those who have experience in working with Enzyme and are trying to understand 
+how to move to React Testing Library. It also has some helpful information for those who are 
+comparing Enzyme with React Testing Library.
+
+
+### Why should I use the react testing library?
+The Enzyme is a good test library, and the library and its contributors did so much for the community. 
+We thank them all so much, but it does not mean we should not talk about differences.
+
+The primary purpose of the React Testing Library is to give you confidence by testing your components, 
+like how your users will. Users don't care what happens behind the scene, and they just see the output! 
+So, instead of checking each DOM element in detail, accessing the components’ internal workflow, or 
+evaluating the state, would it not be more comfortable just to run your tests based on the component 
+output? 
+
+React Testing Library aims to solve the problem that many developers are already facing with Enzyme 
+by writing inefficient tests. When you write more tests in Enzyme, you’ll finally block yourself 
+from making any change in a component! As a result, you have some confidence, but, on the other hand, 
+you slowed down your development speed and productivity, since every small change requires 
+rewriting some part of your tests, even if the difference is not visible in the component output! 
+
+Re-writing your tests in React Testing library worth it because you're trading tests that slow you 
+down for tests that give you more confidence and increase your productivity in the long run.
+
+### How to migrate from Enzyme to React Testing Library?
+One thing to keep in mind that there's not a one-to-one mapping of Enzyme features to React 
+Testing Library features. Many Enzyme features result in inefficient tests, and we are here to 
+learn the React Testing Library’s philosophy and testing approach.
+
+
diff --git a/website/sidebars.json b/website/sidebars.json
index 6dadf9981..0c38dc513 100755
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -27,6 +27,7 @@
           "react-testing-library/example-intro",
           "react-testing-library/setup",
           "react-testing-library/api",
+          "react-testing-library/migrate-from-enzyme",
           "react-testing-library/faq",
           "react-testing-library/cheatsheet"
         ]

From f494c7959cec59e33035f8fc3176d3bc7136e23b Mon Sep 17 00:00:00 2001
From: Mohammad Kermani <98kermani@gmail.com>
Date: Mon, 17 Aug 2020 01:49:28 +0430
Subject: [PATCH 2/7] add instalation guide

---
 .../migrate-from-enzyme.md                    | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/docs/react-testing-library/migrate-from-enzyme.md b/docs/react-testing-library/migrate-from-enzyme.md
index e4c988ba3..0fb4ec26c 100644
--- a/docs/react-testing-library/migrate-from-enzyme.md
+++ b/docs/react-testing-library/migrate-from-enzyme.md
@@ -28,8 +28,30 @@ Re-writing your tests in React Testing library worth it because you're trading t
 down for tests that give you more confidence and increase your productivity in the long run.
 
 ### How to migrate from Enzyme to React Testing Library?
-One thing to keep in mind that there's not a one-to-one mapping of Enzyme features to React 
-Testing Library features. Many Enzyme features result in inefficient tests, and we are here to 
-learn the React Testing Library’s philosophy and testing approach.
+One thing to keep in mind that there's not a one-to-one mapping of Enzyme features 
+to React Testing Library features. Many Enzyme features result in inefficient tests, 
+and we are here to learn the React Testing Library’s philosophy and testing approach.
+
+One of the keys to a successful migrate is to do it incrementally, by running the 
+two test libraries side by side in the same application and porting Enzyme’s tests 
+to React Testing Library one by one. It makes it possible to migrate even large 
+and complex applications without disrupting other businesses because the work can 
+be done collaboratively and spread over some time. 
+
+### How to install the React Testing Library?
+You can check [this page](https://testing-library.com/docs/react-testing-library/setup) 
+for the complete installation and setup guide.
+
+Here is what you should do, first you need to have React Testing Library installed 
+on your machine:
+
+npm
+`npm install --save-dev @testing-library/react @testing-library/jest-dom`
+
+or install via yarn
+`yarn add --dev @testing-library/react @testing-library/jest-dom`
+
+
+
 
 

From f4f5a28d8ebc6cdc88ff0b03b33f3af77fedcdbb Mon Sep 17 00:00:00 2001
From: Mohammad Kermani <98kermani@gmail.com>
Date: Thu, 20 Aug 2020 03:30:23 +0430
Subject: [PATCH 3/7] update migrate-from-enzyme.md

---
 .../migrate-from-enzyme.md                    | 208 +++++++++++++++---
 1 file changed, 172 insertions(+), 36 deletions(-)

diff --git a/docs/react-testing-library/migrate-from-enzyme.md b/docs/react-testing-library/migrate-from-enzyme.md
index 0fb4ec26c..ee1895449 100644
--- a/docs/react-testing-library/migrate-from-enzyme.md
+++ b/docs/react-testing-library/migrate-from-enzyme.md
@@ -3,55 +3,191 @@ id: migrate
 title: Migrate from Enzyme
 sidebar_label: Migrate from Enzyme
 ---
-This page is for those who have experience in working with Enzyme and are trying to understand 
-how to move to React Testing Library. It also has some helpful information for those who are 
-comparing Enzyme with React Testing Library.
+This page would not go into detail, but it’s for those who have experience in working with Enzyme and are trying to
+ understand how to move to React Testing Library. It also has some helpful information for those who are comparing 
+ Enzyme with React Testing Library.
+
+### What is React Testing Library?
+React Testing Library is part of an open-source project named [Testing Library](https://github.com/testing-library). 
+There are several other helpful tools and libraries in the Testing Library project which you can use them to write more 
+efficient tests. Beside the React Testing Library, here are some other Testing Library’s libraries that can help you 
+along the way:
+
+* **[Jest-dom](https://github.com/testing-library/jest-dom)**: The library provides a set of custom jest matchers that 
+you can use to extend jest. These will make your tests more declarative, clear to read, and to maintain. 
+
+* **[user-event](https://github.com/testing-library/user-event):** user-event tries to simulate the real events that 
+would happen in the browser as the user interacts with it. For example, userEvent.click(checkbox) would change the 
+state of the checkbox.
+
+### Why should I use the React Testing Library?
+The Enzyme is a good test library. The library and its contributors did so much for the community. We thank them all, 
+but it does not mean we should not talk about differences and how we are doing better.
+
+The primary purpose of the React Testing Library is to give you confidence by testing your components, like how your 
+users will. Users don't care what happens behind the scene, and they just see the output! So, instead of accessing the 
+components’ internal workflow, or evaluating the `state`, would it not be more comfortable just to run your tests 
+based on the component output? 
+
+React Testing Library aims to solve the problem that many developers are already facing with Enzyme by writing 
+inefficient tests and taking care of 
+[implementation details](https://kentcdodds.com/blog/testing-implementation-details). When you write more tests in 
+Enzyme, you’ll finally block yourself from making any change in a component! As a result, you might have some 
+confidence (true or false!), but, on the other hand, you slowed down your development speed and productivity, 
+since every small change requires rewriting some part of your tests, even if the change you made does not affect 
+the component’s output.
+
+Re-writing your tests in React Testing library worth it because you're trading tests that slow you down for tests 
+that give you more confidence and increase your productivity in the long run.
 
+### How to migrate from Enzyme to React Testing Library?
+One of the keys to a successful migrate is to do it incrementally, by running the two test libraries side by side in 
+the same application and porting Enzyme’s tests to React Testing Library one by one. It makes it possible to migrate 
+even large and complex applications without disrupting other businesses because the work can be done collaboratively 
+and spread over some time. 
+
+### Install React Testing Library
+You can check [this page](https://testing-library.com/docs/react-testing-library/setup) for the complete installation 
+and setup guide.
 
-### Why should I use the react testing library?
-The Enzyme is a good test library, and the library and its contributors did so much for the community. 
-We thank them all so much, but it does not mean we should not talk about differences.
+Here is what you should do, first you need to install the React Testing Library:
 
-The primary purpose of the React Testing Library is to give you confidence by testing your components, 
-like how your users will. Users don't care what happens behind the scene, and they just see the output! 
-So, instead of checking each DOM element in detail, accessing the components’ internal workflow, or 
-evaluating the state, would it not be more comfortable just to run your tests based on the component 
-output? 
+With NPM
 
-React Testing Library aims to solve the problem that many developers are already facing with Enzyme 
-by writing inefficient tests. When you write more tests in Enzyme, you’ll finally block yourself 
-from making any change in a component! As a result, you have some confidence, but, on the other hand, 
-you slowed down your development speed and productivity, since every small change requires 
-rewriting some part of your tests, even if the difference is not visible in the component output! 
+`npm install --save-dev @testing-library/react @testing-library/jest-dom`
 
-Re-writing your tests in React Testing library worth it because you're trading tests that slow you 
-down for tests that give you more confidence and increase your productivity in the long run.
+With Yarn
 
-### How to migrate from Enzyme to React Testing Library?
-One thing to keep in mind that there's not a one-to-one mapping of Enzyme features 
-to React Testing Library features. Many Enzyme features result in inefficient tests, 
-and we are here to learn the React Testing Library’s philosophy and testing approach.
+`yarn add --dev @testing-library/react @testing-library/jest-dom`
 
-One of the keys to a successful migrate is to do it incrementally, by running the 
-two test libraries side by side in the same application and porting Enzyme’s tests 
-to React Testing Library one by one. It makes it possible to migrate even large 
-and complex applications without disrupting other businesses because the work can 
-be done collaboratively and spread over some time. 
+### Import React Testing Library to your test 
+Let’s say we’re using Jest (you can use other test frameworks as well), then you just have to import the following 
+modules into your test file:
 
-### How to install the React Testing Library?
-You can check [this page](https://testing-library.com/docs/react-testing-library/setup) 
-for the complete installation and setup guide.
+```
+// @todo what are the reasons to import React to make React Testing Library work? 
+import React from 'react';
 
-Here is what you should do, first you need to have React Testing Library installed 
-on your machine:
+/**
+* render: lets us render the component (like how React would)
+* screen: It’s almost as same as accessing the “document.body” 
+**/
+import {render, screen} from '@testing-library/react'
+```
 
-npm
-`npm install --save-dev @testing-library/react @testing-library/jest-dom`
+The test structure is as same as how you would write it in Enzyme
 
-or install via yarn
-`yarn add --dev @testing-library/react @testing-library/jest-dom`
+```
+describe('Describe the test', () => {
+   it("test title", () => {
+// Your tests come here...
+   });
+})
+
+```
+
+### Basic Enzyme to React Testing Library migration
+One thing to keep in mind that there's not a one-to-one mapping of Enzyme features to React Testing Library features. 
+Many Enzyme features result in inefficient tests, and we are here to learn the React Testing Library’s philosophy and 
+testing approach.
+
+React Testing Library has dozens of helpful queries which lets you access your component’s elements and their 
+properties, and here we’ll show you a very basic Enzyme’s queries with React Testing Library’s alternatives.
+
+Let’s say we have a `Welcome` component, which just shows a welcome message, and we will have a look at both Enzyme 
+and React Testing Library tests to learn how we can test this component:
+
+**Enzyme**
+```
+it('should have correct welcome text', ()=>{
+   const wrapper = shallow(<Welcome  name='John Doe'/>);
+   expect(wrapper.text()).to.equal('Welcome, John Doe');   
+})
+```
+
+
+**React Testing library**
+```
+ it("should have correct welcome text", () => {
+   render(<Welcome name='John Doe'/>);
+   expect(screen.getByText('Welcome, John Doe')).toBeInTheDocument();
+});
+```
+Alright! as you see, both are pretty similar, Enzyme's `shallow` wrapping doesn’t descend down to sub-components, 
+React Testing Library’s `render` is more similar to `mount`.
+
+You don’t need to assign the `render` result to a variable (ex wrapper, or etc), and you can simply access the 
+rendered output by calling the `screen`. The other good thing to know is that React Testing Library automatically 
+cleans up the output for each test, so you don’t need to call `cleanup` on Jest’s `AfterEeach` function.
+
+React Testing Library aims to test the component, like how users would, users see the button, heading, and other
+elements by their role, not by their `id` or `class`, or element tag name. When you use React Testing Library, you 
+should not try to access the DOM like how you would do by JQuery API. We made some handy which help you to access 
+your elements very efficiently. 
+
+You can see the [list of available queries](https://testing-library.com/docs/dom-testing-library/api-queries) in detail. 
+Something else that people have a problem with is that they’re not sure which query should they use, luckily we have 
+a great page which explains [which query to use](https://testing-library.com/docs/guide-which-query), so don’t forget 
+to check it out!
+
+If you still have a problem with the React Testing Library’s queries, and you’re not sure which query to use, just 
+don’t worry! we’ve created a useful Chrome extension named 
+**[which-query](https://chrome.google.com/webstore/detail/testing-library-which-que/olmmagdolfehlpjmbkmondggbebeimoh)**  
+that aims to enable developers to find a better query when writing tests. Right-click on an element on any web page 
+and it will copy the best possible query for that element into your clipboard. Then simply paste into your test code. 
+
+
+### Simulate user events
+Testing Libray has a perfect library named `user-event` and it simulates the real events that would happen in the 
+browser as the user interacts with it.
+
+To use the `user-event`, you simply need to install it:
+
+With NPM:
+
+`npm install @testing-library/user-event @testing-library/dom --save-dev`
+
+With Yarn:
+
+`yarn add @testing-library/user-event @testing-library/dom --dev`
+
+
+Now you can import it into your test:
+
+`import userEvent from '@testing-library/user-event'`
+
+
+To demonstrate how to use `user-event` library, imagine we have a component named Checkbox, and it only shows a checkbox,
+ and we want to simulate the user event with this component, here is the component:
+
+```
+// Checkbox.js
+import React from 'react'
+const Checkbox = () => {
+   return (
+       <div>
+           <label htmlFor="checkbox">Check</label>
+           <input id="checkbox" type="checkbox" />
+       </div>
+   )
+}
 
+export default Checkbox;
+```
 
+And here we want to test when a user click on the checkbox, does the value change to “checked”? So, let’s see how we 
+write a test for that case:
 
+```
+it('should to handle click correctly', () => {
+  
+  render(<Checkbox/>)
 
+  userEvent.click(screen.getByText('Check'))
+  expect(screen.getByLabelText('Check')).toHaveAttribute('checked', true)
+})
+```
 
+You see! With the help of other modules provided by the Testing Library, we can test our components smoothly! 
+To learn more about the `user-event` library, you can have a look at its 
+[GitHub repository](https://github.com/testing-library/user-event#table-of-contents)
\ No newline at end of file

From a8ce4998dd966ba26f2fcb8f8bcbb358da2c0f08 Mon Sep 17 00:00:00 2001
From: Kermani <98kermani@gmail.com>
Date: Thu, 27 Aug 2020 17:00:14 +0430
Subject: [PATCH 4/7] fix grammar problem

Co-authored-by: Nick McCurdy <nick@nickmccurdy.com>
---
 docs/react-testing-library/migrate-from-enzyme.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/react-testing-library/migrate-from-enzyme.md b/docs/react-testing-library/migrate-from-enzyme.md
index ee1895449..d223fb63e 100644
--- a/docs/react-testing-library/migrate-from-enzyme.md
+++ b/docs/react-testing-library/migrate-from-enzyme.md
@@ -21,7 +21,7 @@ would happen in the browser as the user interacts with it. For example, userEven
 state of the checkbox.
 
 ### Why should I use the React Testing Library?
-The Enzyme is a good test library. The library and its contributors did so much for the community. We thank them all, 
+Enzyme is a good test library. The library and its contributors did so much for the community. We thank them all, 
 but it does not mean we should not talk about differences and how we are doing better.
 
 The primary purpose of the React Testing Library is to give you confidence by testing your components, like how your 
@@ -190,4 +190,4 @@ it('should to handle click correctly', () => {
 
 You see! With the help of other modules provided by the Testing Library, we can test our components smoothly! 
 To learn more about the `user-event` library, you can have a look at its 
-[GitHub repository](https://github.com/testing-library/user-event#table-of-contents)
\ No newline at end of file
+[GitHub repository](https://github.com/testing-library/user-event#table-of-contents)

From 9344910ef5725567b20a9d6bc133c792e6f2143c Mon Sep 17 00:00:00 2001
From: Mohammad Kermani <98kermani@gmail.com>
Date: Fri, 28 Aug 2020 02:12:24 +0430
Subject: [PATCH 5/7] add update, act and finding element sections

---
 .../migrate-from-enzyme.md                    | 52 ++++++++++++-------
 1 file changed, 34 insertions(+), 18 deletions(-)

diff --git a/docs/react-testing-library/migrate-from-enzyme.md b/docs/react-testing-library/migrate-from-enzyme.md
index d223fb63e..cb5363fc7 100644
--- a/docs/react-testing-library/migrate-from-enzyme.md
+++ b/docs/react-testing-library/migrate-from-enzyme.md
@@ -4,10 +4,10 @@ title: Migrate from Enzyme
 sidebar_label: Migrate from Enzyme
 ---
 This page would not go into detail, but it’s for those who have experience in working with Enzyme and are trying to
- understand how to move to React Testing Library. It also has some helpful information for those who are comparing 
- Enzyme with React Testing Library.
+understand how to move to React Testing Library. It also has some helpful information for those who are comparing 
+Enzyme with React Testing Library.
 
-### What is React Testing Library?
+## What is React Testing Library?
 React Testing Library is part of an open-source project named [Testing Library](https://github.com/testing-library). 
 There are several other helpful tools and libraries in the Testing Library project which you can use them to write more 
 efficient tests. Beside the React Testing Library, here are some other Testing Library’s libraries that can help you 
@@ -20,7 +20,7 @@ you can use to extend jest. These will make your tests more declarative, clear t
 would happen in the browser as the user interacts with it. For example, userEvent.click(checkbox) would change the 
 state of the checkbox.
 
-### Why should I use the React Testing Library?
+## Why should I use the React Testing Library?
 Enzyme is a good test library. The library and its contributors did so much for the community. We thank them all, 
 but it does not mean we should not talk about differences and how we are doing better.
 
@@ -40,13 +40,13 @@ the component’s output.
 Re-writing your tests in React Testing library worth it because you're trading tests that slow you down for tests 
 that give you more confidence and increase your productivity in the long run.
 
-### How to migrate from Enzyme to React Testing Library?
+## How to migrate from Enzyme to React Testing Library?
 One of the keys to a successful migrate is to do it incrementally, by running the two test libraries side by side in 
 the same application and porting Enzyme’s tests to React Testing Library one by one. It makes it possible to migrate 
 even large and complex applications without disrupting other businesses because the work can be done collaboratively 
 and spread over some time. 
 
-### Install React Testing Library
+## Install React Testing Library
 You can check [this page](https://testing-library.com/docs/react-testing-library/setup) for the complete installation 
 and setup guide.
 
@@ -60,7 +60,7 @@ With Yarn
 
 `yarn add --dev @testing-library/react @testing-library/jest-dom`
 
-### Import React Testing Library to your test 
+## Import React Testing Library to your test 
 Let’s say we’re using Jest (you can use other test frameworks as well), then you just have to import the following 
 modules into your test file:
 
@@ -86,7 +86,7 @@ describe('Describe the test', () => {
 
 ```
 
-### Basic Enzyme to React Testing Library migration
+## Basic Enzyme to React Testing Library migration
 One thing to keep in mind that there's not a one-to-one mapping of Enzyme features to React Testing Library features. 
 Many Enzyme features result in inefficient tests, and we are here to learn the React Testing Library’s philosophy and 
 testing approach.
@@ -130,16 +130,32 @@ Something else that people have a problem with is that they’re not sure which
 a great page which explains [which query to use](https://testing-library.com/docs/guide-which-query), so don’t forget 
 to check it out!
 
-If you still have a problem with the React Testing Library’s queries, and you’re not sure which query to use, just 
-don’t worry! we’ve created a useful Chrome extension named 
-**[which-query](https://chrome.google.com/webstore/detail/testing-library-which-que/olmmagdolfehlpjmbkmondggbebeimoh)**  
-that aims to enable developers to find a better query when writing tests. Right-click on an element on any web page 
-and it will copy the best possible query for that element into your clipboard. Then simply paste into your test code. 
-
-
-### Simulate user events
-Testing Libray has a perfect library named `user-event` and it simulates the real events that would happen in the 
-browser as the user interacts with it.
+If you still have a problem with the React Testing Library’s queries, and you’re not sure which query to use, 
+there is an awesome Chrome extension named 
+**[Testing Playground](https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano/related)**  
+that aims to enable developers to find a better query when writing tests. nd it helps you find the best queries 
+to select elements. It allows you to inspect the element hierarchies in the Chrome Developer Tools, 
+and provides you with suggestions on how to select them, while encouraging good testing practices. 
+
+## using act() and wrapper.update()
+In Enzyme, for some asynchronous purposes, you have to call `act()` to run your tests correctly, but you don't need to use 
+`act()` most of the times since React Testing Library will wrap APIs with `act()` so you don't need to manually wrap it.
+
+`update()` syncs the Enzyme component tree snapshot with the react component tree, often time you might see `wrapper.update()`
+ in Enzyme, but React Testing Library does not need something like that, good for you since you need to handle fewer things!
+ 
+## Finding elements
+As for Enzyme, there are several ways to access elements in React Testing Library as well. Let's imagine we have the 
+following Enzyme test
+@todo continue from here
+
+
+## Simulate user events
+There are two ways to simulate user events, one is a perfect library named 
+[`user-event`](https://github.com/testing-library/user-event), and the other way is  to use 
+[`fireEvent`](https://testing-library.com/docs/dom-testing-library/api-events) which simulated
+a copy of the DOM on Node by using jsdom. We recommend using `user-event` since it simulates the real events that would 
+happen in the browser as the user interacts with it.  
 
 To use the `user-event`, you simply need to install it:
 

From ed6d9bf94af33fd27128325f957d91683574a8b0 Mon Sep 17 00:00:00 2001
From: Mohammad Kermani <98kermani@gmail.com>
Date: Tue, 1 Sep 2020 02:07:08 +0430
Subject: [PATCH 6/7] add more example, wrapper.instance and shallow render

---
 .../migrate-from-enzyme.md                    | 156 +++++++++++++++---
 1 file changed, 130 insertions(+), 26 deletions(-)

diff --git a/docs/react-testing-library/migrate-from-enzyme.md b/docs/react-testing-library/migrate-from-enzyme.md
index cb5363fc7..4f2661b02 100644
--- a/docs/react-testing-library/migrate-from-enzyme.md
+++ b/docs/react-testing-library/migrate-from-enzyme.md
@@ -86,7 +86,7 @@ describe('Describe the test', () => {
 
 ```
 
-## Basic Enzyme to React Testing Library migration
+## Basic Enzyme to React Testing Library migration examples
 One thing to keep in mind that there's not a one-to-one mapping of Enzyme features to React Testing Library features. 
 Many Enzyme features result in inefficient tests, and we are here to learn the React Testing Library’s philosophy and 
 testing approach.
@@ -97,11 +97,61 @@ properties, and here we’ll show you a very basic Enzyme’s queries with React
 Let’s say we have a `Welcome` component, which just shows a welcome message, and we will have a look at both Enzyme 
 and React Testing Library tests to learn how we can test this component:
 
-**Enzyme**
+**React Component**
+
+The following component gets a `name` from `props` and shows a welcome message in an `h1` element, it also has a 
+text input which users can change to a different name, and the template updates accordingly.
+Check the live version on [Stackblitz](https://stackblitz.com/edit/react-cs4aw4?file=src/index.js)
+```
+
+const Welcome = props => {
+    const [values, setValues] = useState({
+        firstName: props.firstName,
+        lastName: props.lastName
+    });
+
+    const handleChange = event => {
+        setValues({...values, [event.target.name]: event.target.value})
+    };
+
+    return (
+        <div>
+            <h1>Hello, {values.firstName} {values.lastName}</h1>
+
+            <form>
+                <label>
+                    First Name
+                    <input
+                        value={values.firstName}
+                        name="firstName"
+                        onChange={handleChange}
+                    />
+                </label>
+
+                <label>
+                    Last Name
+                    <input
+                        value={values.lastName}
+                        name="lastName"
+                        onChange={handleChange}
+                    />
+                </label>
+            </form>
+        </div>
+    );
+};
+
+export default Welcome;
+
+```
+
+### Test 1: Render the component, and check if the `h1` value is correct
+
+**Enzyme test**
 ```
 it('should have correct welcome text', ()=>{
-   const wrapper = shallow(<Welcome  name='John Doe'/>);
-   expect(wrapper.text()).to.equal('Welcome, John Doe');   
+   const wrapper = shallow(<Welcome firstName='John' lastName='Doe'/>);
+   expect(wrapper.find('h1').text()).to.equal('Welcome, John Doe');   
 })
 ```
 
@@ -109,23 +159,66 @@ it('should have correct welcome text', ()=>{
 **React Testing library**
 ```
  it("should have correct welcome text", () => {
-   render(<Welcome name='John Doe'/>);
-   expect(screen.getByText('Welcome, John Doe')).toBeInTheDocument();
+   render(<Welcome firstName='John' lastName='Doe'/>);
+   expect(screen.getByRole('heading')).toHaveTextContent('Welcome, John Doe');
 });
 ```
-Alright! as you see, both are pretty similar, Enzyme's `shallow` wrapping doesn’t descend down to sub-components, 
+
+As you see, both are pretty similar, Enzyme's `shallow` wrapping doesn’t descend down to sub-components, 
 React Testing Library’s `render` is more similar to `mount`.
 
-You don’t need to assign the `render` result to a variable (ex wrapper, or etc), and you can simply access the 
-rendered output by calling the `screen`. The other good thing to know is that React Testing Library automatically 
-cleans up the output for each test, so you don’t need to call `cleanup` on Jest’s `AfterEeach` function.
+In React Testing Library, you don’t need to assign the `render` result to a variable (wrapper, or etc), 
+and you can simply access the rendered output by calling the `screen`. The other good thing to know is 
+that React Testing Library automatically cleans up the output for each test, so you don’t need to call 
+`cleanup` on Jest’s `AfterEach` or `BeforeEach` function.
 
-React Testing Library aims to test the component, like how users would, users see the button, heading, and other
-elements by their role, not by their `id` or `class`, or element tag name. When you use React Testing Library, you 
-should not try to access the DOM like how you would do by JQuery API. We made some handy which help you to access 
-your elements very efficiently. 
+The other thing that you might notice is `getByRole` which has `heading` as its value. `heading` is the accessible
+role of the `h1` element. You can learn more about them on 
+[queries](https://testing-library.com/docs/dom-testing-library/api-queries#byrole) documentation page.
+
+### Test 2: Input texts must have correct value
+In the component above, the input text value will be initialized with the `props.firstName` and `props.lastName` 
+values, and we need to check whether the value is correct or not
+
+**Enzyme**
+```
+ it("should have correct input value", () => {
+   const wrapper = shallow(<Welcome firstName='John' lastName='Doe'/>);
+   expect(wrapper.find('input[name="firstName"]').value).to.equal('John');
+   expect(wrapper.find('input[name="lastName"]').value).to.equal('Doe');
+});
+```
+
+**React Testing Library**
+```
+it("should have correct input value", () => {
+  render(<<Welcome firstName='John' lastName='Doe'/>);
+  expect(screen.getByRole('form')).toHaveFormValues({
+      firstName: 'John',
+      lastName: 'Doe',
+  })
+});
+```
+Cool! It's pretty simple and handy, and the tests are clear enough that we don't need to talk so much about them.
+But something that you might notice is that the `<form>` had a `role="form"` attribute, but what is it? 
+
+`role` is one of the accessibility-related attributes that is recommended to use to improve your web application
+for people with disabilities. Some elements have default `role` values and you don't need to set one for them, 
+but some others like `<form>` does not have one. You could use different approaches to access the `<form>` element,
+but we recommend trying to access elements by their `role` to make sure your component is accessible by people with
+disabilities and those who are using screen readers. 
+This [section](https://testing-library.com/docs/dom-testing-library/api-queries#byrole) 
+of the query page might help you to understand better.
+
+
+React Testing Library aims to test the component, like how users would, users see the button, heading, form
+and other elements by their role, not by their `id` or `class`, or element tag name. When you use React Testing
+Library, you should not try to access the DOM like how you would do by JQuery API. 
+
+We made some handy query API which help you to access the component elements very efficiently,
+and you can see the [list of available queries](https://testing-library.com/docs/dom-testing-library/api-queries)
+in detail. 
 
-You can see the [list of available queries](https://testing-library.com/docs/dom-testing-library/api-queries) in detail. 
 Something else that people have a problem with is that they’re not sure which query should they use, luckily we have 
 a great page which explains [which query to use](https://testing-library.com/docs/guide-which-query), so don’t forget 
 to check it out!
@@ -133,21 +226,18 @@ to check it out!
 If you still have a problem with the React Testing Library’s queries, and you’re not sure which query to use, 
 there is an awesome Chrome extension named 
 **[Testing Playground](https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano/related)**  
-that aims to enable developers to find a better query when writing tests. nd it helps you find the best queries 
+that aims to enable developers to find a better query when writing tests, and it helps you find the best queries 
 to select elements. It allows you to inspect the element hierarchies in the Chrome Developer Tools, 
 and provides you with suggestions on how to select them, while encouraging good testing practices. 
 
 ## using act() and wrapper.update()
-In Enzyme, for some asynchronous purposes, you have to call `act()` to run your tests correctly, but you don't need to use 
-`act()` most of the times since React Testing Library will wrap APIs with `act()` so you don't need to manually wrap it.
+In Enzyme, for some asynchronous purposes, you have to call `act()` to run your tests correctly, but in 
+ React Testing Library you don't need to use `act()` most of the times since it will wrap APIs with
+  `act()` so you don't need to manually wrap it.
 
-`update()` syncs the Enzyme component tree snapshot with the react component tree, often time you might see `wrapper.update()`
- in Enzyme, but React Testing Library does not need something like that, good for you since you need to handle fewer things!
- 
-## Finding elements
-As for Enzyme, there are several ways to access elements in React Testing Library as well. Let's imagine we have the 
-following Enzyme test
-@todo continue from here
+`update()` syncs the Enzyme component tree snapshot with the react component tree, often time you might see 
+`wrapper.update()` in Enzyme tests, but React Testing Library does not need something like that, 
+good for you since you need to handle fewer things!
 
 
 ## Simulate user events
@@ -204,6 +294,20 @@ it('should to handle click correctly', () => {
 })
 ```
 
-You see! With the help of other modules provided by the Testing Library, we can test our components smoothly! 
+Easy! With the help of other modules provided by the Testing Library, we can test our components smoothly! 
 To learn more about the `user-event` library, you can have a look at its 
 [GitHub repository](https://github.com/testing-library/user-event#table-of-contents)
+
+### Triggering class methods in tests (`wrapper.instance()`)
+As we already discussed, we are against testing implementation details and things that uses are not aware of it,
+and we aim to test and interact with the component like how our users would.
+
+>  if your test uses instance() or state(), know that you're testing things that the user couldn't possibly
+> know about or even care about, which will take your tests further from giving you confidence that things will
+> work when your user uses them. [Kent C. Dodds](https://kentcdodds.com/blog/why-i-never-use-shallow-rendering#calling-methods-in-react-components)
+
+### How to `shallow` render a component?
+Generally, you should avoid mocking out components. However, if you need to, then it's pretty trivial 
+using [Jest's mocking](https://jestjs.io/docs/en/manual-mocks.html) 
+feature. (see our [FAQ](https://testing-library.com/docs/react-testing-library/faq))
+

From ee43c5d78825f6fa3c815b7062e42cf4b2591816 Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <me+github@kentcdodds.com>
Date: Wed, 2 Sep 2020 12:18:30 -0600
Subject: [PATCH 7/7] format and modify wording and examples

---
 .../migrate-from-enzyme.md                    | 487 ++++++++++--------
 1 file changed, 274 insertions(+), 213 deletions(-)

diff --git a/docs/react-testing-library/migrate-from-enzyme.md b/docs/react-testing-library/migrate-from-enzyme.md
index 4f2661b02..9686a5c2f 100644
--- a/docs/react-testing-library/migrate-from-enzyme.md
+++ b/docs/react-testing-library/migrate-from-enzyme.md
@@ -3,311 +3,372 @@ id: migrate
 title: Migrate from Enzyme
 sidebar_label: Migrate from Enzyme
 ---
-This page would not go into detail, but it’s for those who have experience in working with Enzyme and are trying to
-understand how to move to React Testing Library. It also has some helpful information for those who are comparing 
-Enzyme with React Testing Library.
 
-## What is React Testing Library?
-React Testing Library is part of an open-source project named [Testing Library](https://github.com/testing-library). 
-There are several other helpful tools and libraries in the Testing Library project which you can use them to write more 
-efficient tests. Beside the React Testing Library, here are some other Testing Library’s libraries that can help you 
-along the way:
+This page does not go into detail, but it's for those who have experience in
+working with Enzyme and are trying to understand how to move to React Testing
+Library. It also has some helpful information for those who are comparing Enzyme
+with React Testing Library.
 
-* **[Jest-dom](https://github.com/testing-library/jest-dom)**: The library provides a set of custom jest matchers that 
-you can use to extend jest. These will make your tests more declarative, clear to read, and to maintain. 
+## What is React Testing Library?
 
-* **[user-event](https://github.com/testing-library/user-event):** user-event tries to simulate the real events that 
-would happen in the browser as the user interacts with it. For example, userEvent.click(checkbox) would change the 
-state of the checkbox.
+React Testing Library is part of an open-source project named
+[Testing Library](https://github.com/testing-library). There are several other
+helpful tools and libraries in the Testing Library project which you can use
+them to write more useful tests. Beside React Testing Library, here are some
+other Testing Library's libraries that can help you along the way:
 
-## Why should I use the React Testing Library?
-Enzyme is a good test library. The library and its contributors did so much for the community. We thank them all, 
-but it does not mean we should not talk about differences and how we are doing better.
+- **[@testing-library/jest-dom](https://github.com/testing-library/jest-dom)**:
+  jest-dom provides a set of custom jest matchers that you can use to extend
+  jest. These will make your tests more declarative, clear to read, and to
+  maintain.
 
-The primary purpose of the React Testing Library is to give you confidence by testing your components, like how your 
-users will. Users don't care what happens behind the scene, and they just see the output! So, instead of accessing the 
-components’ internal workflow, or evaluating the `state`, would it not be more comfortable just to run your tests 
-based on the component output? 
+- **[@testing-library/user-event](https://github.com/testing-library/user-event):**
+  user-event tries to simulate the real events that would happen in the browser
+  as the user interacts with it. For example, userEvent.click(checkbox) would
+  change the state of the checkbox.
 
-React Testing Library aims to solve the problem that many developers are already facing with Enzyme by writing 
-inefficient tests and taking care of 
-[implementation details](https://kentcdodds.com/blog/testing-implementation-details). When you write more tests in 
-Enzyme, you’ll finally block yourself from making any change in a component! As a result, you might have some 
-confidence (true or false!), but, on the other hand, you slowed down your development speed and productivity, 
-since every small change requires rewriting some part of your tests, even if the change you made does not affect 
-the component’s output.
+## Why should I use the React Testing Library?
 
-Re-writing your tests in React Testing library worth it because you're trading tests that slow you down for tests 
-that give you more confidence and increase your productivity in the long run.
+Enzyme is a good test library. The library and its contributors did so much for
+the community. Many of the React Testing Library maintainers used and
+contributed to Enzyme for years before developing and working on React Testing
+Library. So we want to say, thank you to the contributors of Enzyme!
+
+The primary purpose of the React Testing Library is to give you confidence by
+testing your components in the way the user will use them. Users don't care what
+happens behind the scenes. They just see and interact with the output. So,
+instead of accessing the components' internal API, or evaluating the `state`,
+you'll get more confidence by writing your tests based on the component output.
+
+React Testing Library aims to solve the problem that many developers face when
+writing tests with Enzyme which allows (and encourages) developers to test
+[implementation details](https://kentcdodds.com/blog/testing-implementation-details).
+Tests which do this ultimately prevent you from modifying and refactoring the
+component without changing the test. As a result, the tests slowed down your
+development speed and productivity, since every small change requires rewriting
+some part of your tests, even if the change you made does not affect the
+component's output.
+
+Re-writing your tests in React Testing library worthwhile because you're trading
+tests that slow you down for tests that give you more confidence and increase
+your productivity in the long run.
 
 ## How to migrate from Enzyme to React Testing Library?
-One of the keys to a successful migrate is to do it incrementally, by running the two test libraries side by side in 
-the same application and porting Enzyme’s tests to React Testing Library one by one. It makes it possible to migrate 
-even large and complex applications without disrupting other businesses because the work can be done collaboratively 
-and spread over some time. 
 
-## Install React Testing Library
-You can check [this page](https://testing-library.com/docs/react-testing-library/setup) for the complete installation 
-and setup guide.
+One of the keys to a successful migrate is to do it incrementally, by running
+the two test libraries side by side in the same application and porting Enzyme's
+tests to React Testing Library one by one. It makes it possible to migrate even
+large and complex applications without disrupting other businesses because the
+work can be done collaboratively and spread over some time.
 
-Here is what you should do, first you need to install the React Testing Library:
+## Install React Testing Library
 
-With NPM
+You can check
+[this page](https://testing-library.com/docs/react-testing-library/setup) for
+the complete installation and setup guide.
 
-`npm install --save-dev @testing-library/react @testing-library/jest-dom`
+Here is what you should do, first you need to install the React Testing Library:
 
-With Yarn
+```
+npm install --save-dev @testing-library/react @testing-library/jest-dom
+```
 
-`yarn add --dev @testing-library/react @testing-library/jest-dom`
+## Import React Testing Library to your test
 
-## Import React Testing Library to your test 
-Let’s say we’re using Jest (you can use other test frameworks as well), then you just have to import the following 
-modules into your test file:
+Let's say we're using Jest (you can use other test frameworks as well), then you
+just have to import the following modules into your test file:
 
-```
-// @todo what are the reasons to import React to make React Testing Library work? 
-import React from 'react';
+```jsx
+// import React so you can use JSX (React.createElement) in your test
+import React from 'react'
 
 /**
-* render: lets us render the component (like how React would)
-* screen: It’s almost as same as accessing the “document.body” 
-**/
-import {render, screen} from '@testing-library/react'
+ * render: lets us render the component (like how React would)
+ * screen: Your utility for finding elements the same way the user does
+ **/
+import { render, screen } from '@testing-library/react'
 ```
 
 The test structure is as same as how you would write it in Enzyme
 
-```
-describe('Describe the test', () => {
-   it("test title", () => {
-// Your tests come here...
-   });
+```jsx
+test('test title', () => {
+  // Your tests come here...
 })
-
 ```
 
+> Note: you can also use `describe` and `it` blocks with React Testing Library.
+> React Testing Library doesn't replace Jest, just Enzyme. We recommend `test`
+> because it helps with this:
+> [Avoid Nesting When You're Testing](https://kentcdodds.com/blog/avoid-nesting-when-youre-testing)
+
 ## Basic Enzyme to React Testing Library migration examples
-One thing to keep in mind that there's not a one-to-one mapping of Enzyme features to React Testing Library features. 
-Many Enzyme features result in inefficient tests, and we are here to learn the React Testing Library’s philosophy and 
-testing approach.
 
-React Testing Library has dozens of helpful queries which lets you access your component’s elements and their 
-properties, and here we’ll show you a very basic Enzyme’s queries with React Testing Library’s alternatives.
+One thing to keep in mind that there's not a one-to-one mapping of Enzyme
+features to React Testing Library features. Many Enzyme features result in
+inefficient tests. Unfortunately, that means many of the features you're
+accustomed to with Enzyme will need to be left behind with Enzyme (no more need
+for a `wrapper` variable or `wrapper.update()` calls, etc.).
+
+React Testing Library has helpful queries which lets you access your component's
+elements and their properties, and here we'll show typical Enzyme tests with
+React Testing Library's alternatives.
 
-Let’s say we have a `Welcome` component, which just shows a welcome message, and we will have a look at both Enzyme 
-and React Testing Library tests to learn how we can test this component:
+Let's say we have a `Welcome` component, which just shows a welcome message, and
+we will have a look at both Enzyme and React Testing Library tests to learn how
+we can test this component:
 
 **React Component**
 
-The following component gets a `name` from `props` and shows a welcome message in an `h1` element, it also has a 
-text input which users can change to a different name, and the template updates accordingly.
-Check the live version on [Stackblitz](https://stackblitz.com/edit/react-cs4aw4?file=src/index.js)
-```
+The following component gets a `name` from `props` and shows a welcome message
+in an `h1` element, it also has a text input which users can change to a
+different name, and the template updates accordingly. Check the live version on
+[Codesandbox](https://codesandbox.io/s/ecstatic-hellman-fh7in)
 
+```jsx
 const Welcome = props => {
-    const [values, setValues] = useState({
-        firstName: props.firstName,
-        lastName: props.lastName
-    });
-
-    const handleChange = event => {
-        setValues({...values, [event.target.name]: event.target.value})
-    };
-
-    return (
-        <div>
-            <h1>Hello, {values.firstName} {values.lastName}</h1>
-
-            <form>
-                <label>
-                    First Name
-                    <input
-                        value={values.firstName}
-                        name="firstName"
-                        onChange={handleChange}
-                    />
-                </label>
-
-                <label>
-                    Last Name
-                    <input
-                        value={values.lastName}
-                        name="lastName"
-                        onChange={handleChange}
-                    />
-                </label>
-            </form>
-        </div>
-    );
-};
-
-export default Welcome;
+  const [values, setValues] = useState({
+    firstName: props.firstName,
+    lastName: props.lastName,
+  })
+
+  const handleChange = event => {
+    setValues({ ...values, [event.target.name]: event.target.value })
+  }
+
+  return (
+    <div>
+      <h1>
+        Welcome, {values.firstName} {values.lastName}
+      </h1>
+
+      <form name="userName">
+        <label>
+          First Name
+          <input
+            value={values.firstName}
+            name="firstName"
+            onChange={handleChange}
+          />
+        </label>
+
+        <label>
+          Last Name
+          <input
+            value={values.lastName}
+            name="lastName"
+            onChange={handleChange}
+          />
+        </label>
+      </form>
+    </div>
+  )
+}
 
+export default Welcome
 ```
 
 ### Test 1: Render the component, and check if the `h1` value is correct
 
 **Enzyme test**
-```
-it('should have correct welcome text', ()=>{
-   const wrapper = shallow(<Welcome firstName='John' lastName='Doe'/>);
-   expect(wrapper.find('h1').text()).to.equal('Welcome, John Doe');   
+
+```jsx
+test('has correct welcome text', () => {
+  const wrapper = shallow(<Welcome firstName="John" lastName="Doe" />)
+  expect(wrapper.find('h1').text()).to.equal('Welcome, John Doe')
 })
 ```
 
-
 **React Testing library**
-```
- it("should have correct welcome text", () => {
-   render(<Welcome firstName='John' lastName='Doe'/>);
-   expect(screen.getByRole('heading')).toHaveTextContent('Welcome, John Doe');
-});
+
+```jsx
+test('has correct welcome text', () => {
+  render(<Welcome firstName="John" lastName="Doe" />)
+  expect(screen.getByRole('heading')).toHaveTextContent('Welcome, John Doe')
+})
 ```
 
-As you see, both are pretty similar, Enzyme's `shallow` wrapping doesn’t descend down to sub-components, 
-React Testing Library’s `render` is more similar to `mount`.
+As you see, both are pretty similar, Enzyme's `shallow` wrapping doesn't descend
+down to sub-components, React Testing Library's `render` is more similar to
+`mount`.
 
-In React Testing Library, you don’t need to assign the `render` result to a variable (wrapper, or etc), 
-and you can simply access the rendered output by calling the `screen`. The other good thing to know is 
-that React Testing Library automatically cleans up the output for each test, so you don’t need to call 
-`cleanup` on Jest’s `AfterEach` or `BeforeEach` function.
+In React Testing Library, you don't need to assign the `render` result to a
+variable (wrapper, or etc), and you can simply access the rendered output by
+calling the `screen`. The other good thing to know is that React Testing Library
+automatically cleans up the output for each test, so you don't need to call
+`cleanup` on Jest's `afterEach` or `beforeEach` function.
 
-The other thing that you might notice is `getByRole` which has `heading` as its value. `heading` is the accessible
-role of the `h1` element. You can learn more about them on 
-[queries](https://testing-library.com/docs/dom-testing-library/api-queries#byrole) documentation page.
+The other thing that you might notice is `getByRole` which has `heading` as its
+value. `heading` is the accessible role of the `h1` element. You can learn more
+about them on
+[queries](https://testing-library.com/docs/dom-testing-library/api-queries#byrole)
+documentation page. One of the things people quickly learn to love about Testing
+Library is how it encourages you to write more accessible applications (because
+if it's not accessible, then it's harder to test).
 
 ### Test 2: Input texts must have correct value
-In the component above, the input text value will be initialized with the `props.firstName` and `props.lastName` 
-values, and we need to check whether the value is correct or not
+
+In the component above, the input text value will be initialized with the
+`props.firstName` and `props.lastName` values, and we need to check whether the
+value is correct or not
 
 **Enzyme**
-```
- it("should have correct input value", () => {
-   const wrapper = shallow(<Welcome firstName='John' lastName='Doe'/>);
-   expect(wrapper.find('input[name="firstName"]').value).to.equal('John');
-   expect(wrapper.find('input[name="lastName"]').value).to.equal('Doe');
-});
+
+```jsx
+test('has correct input value', () => {
+  const wrapper = shallow(<Welcome firstName="John" lastName="Doe" />)
+  expect(wrapper.find('input[name="firstName"]').value).to.equal('John')
+  expect(wrapper.find('input[name="lastName"]').value).to.equal('Doe')
+})
 ```
 
 **React Testing Library**
-```
-it("should have correct input value", () => {
-  render(<<Welcome firstName='John' lastName='Doe'/>);
+
+```jsx
+test('has correct input value', () => {
+  render(<Welcome firstName="John" lastName="Doe" />)
   expect(screen.getByRole('form')).toHaveFormValues({
-      firstName: 'John',
-      lastName: 'Doe',
+    firstName: 'John',
+    lastName: 'Doe',
   })
-});
+})
 ```
-Cool! It's pretty simple and handy, and the tests are clear enough that we don't need to talk so much about them.
-But something that you might notice is that the `<form>` had a `role="form"` attribute, but what is it? 
-
-`role` is one of the accessibility-related attributes that is recommended to use to improve your web application
-for people with disabilities. Some elements have default `role` values and you don't need to set one for them, 
-but some others like `<form>` does not have one. You could use different approaches to access the `<form>` element,
-but we recommend trying to access elements by their `role` to make sure your component is accessible by people with
-disabilities and those who are using screen readers. 
-This [section](https://testing-library.com/docs/dom-testing-library/api-queries#byrole) 
-of the query page might help you to understand better.
-
-
-React Testing Library aims to test the component, like how users would, users see the button, heading, form
-and other elements by their role, not by their `id` or `class`, or element tag name. When you use React Testing
-Library, you should not try to access the DOM like how you would do by JQuery API. 
-
-We made some handy query API which help you to access the component elements very efficiently,
-and you can see the [list of available queries](https://testing-library.com/docs/dom-testing-library/api-queries)
-in detail. 
 
-Something else that people have a problem with is that they’re not sure which query should they use, luckily we have 
-a great page which explains [which query to use](https://testing-library.com/docs/guide-which-query), so don’t forget 
-to check it out!
+Cool! It's pretty simple and handy, and the tests are clear enough that we don't
+need to talk so much about them. But something that you might notice is that the
+`<form>` had a `role="form"` attribute, but what is it?
+
+`role` is one of the accessibility-related attributes that is recommended to use
+to improve your web application for people with disabilities. Some elements have
+default `role` values and you don't need to set one for them, but some others
+like `<div>` do not have one. You could use different approaches to access the
+`<div>` element, but we recommend trying to access elements by their implicit
+`role` to make sure your component is accessible by people with disabilities and
+those who are using screen readers. This
+[section](https://testing-library.com/docs/dom-testing-library/api-queries#byrole)
+of the query page might help you to understand better.
 
-If you still have a problem with the React Testing Library’s queries, and you’re not sure which query to use, 
-there is an awesome Chrome extension named 
+> Keep in mind that a `<form>` must have a `name` attribute in order to have an
+> implicit `role` of `form` (as required by the specification).
+
+React Testing Library aims to test the component, like how users would, users
+see the button, heading, form and other elements by their role, not by their
+`id` or `class`, or element tag name. When you use React Testing Library, you
+should not try to access the DOM like how you would do by
+`document.querySelector` API (which you can incidentally use in your tests, but
+it's not recommended for the reasons stated in this paragraph).
+
+We made some handy query APIs which help you to access the component elements
+very efficiently, and you can see the
+[list of available queries](https://testing-library.com/docs/dom-testing-library/api-queries)
+in detail.
+
+Something else that people have a problem with is that they're not sure which
+query should they use, luckily we have a great page which explains
+[which query to use](https://testing-library.com/docs/guide-which-query), so
+don't forget to check it out!
+
+If you still have a problem with the React Testing Library's queries, and you're
+not sure which query to use, then check out
+[testing-playground.com](https://testing-playground.com) and the accompanying
+Chrome extension
 **[Testing Playground](https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano/related)**  
-that aims to enable developers to find a better query when writing tests, and it helps you find the best queries 
-to select elements. It allows you to inspect the element hierarchies in the Chrome Developer Tools, 
-and provides you with suggestions on how to select them, while encouraging good testing practices. 
+that aims to enable developers to find a better query when writing tests, and it
+helps you find the best queries to select elements. It allows you to inspect the
+element hierarchies in the Chrome Developer Tools, and provides you with
+suggestions on how to select them, while encouraging good testing practices.
 
 ## using act() and wrapper.update()
-In Enzyme, for some asynchronous purposes, you have to call `act()` to run your tests correctly, but in 
- React Testing Library you don't need to use `act()` most of the times since it will wrap APIs with
-  `act()` so you don't need to manually wrap it.
 
-`update()` syncs the Enzyme component tree snapshot with the react component tree, often time you might see 
-`wrapper.update()` in Enzyme tests, but React Testing Library does not need something like that, 
-good for you since you need to handle fewer things!
+In Enzyme, for some asynchronous purposes, you have to call `act()` to run your
+tests correctly, but in React Testing Library you don't need to use `act()` most
+of the time since it wraps APIs with `act()` so you don't need to manually wrap
+it.
 
+`update()` syncs the Enzyme component tree snapshot with the react component
+tree, often time you might see `wrapper.update()` in Enzyme tests, but React
+Testing Library does not need something like that, good for you since you need
+to handle fewer things!
 
 ## Simulate user events
-There are two ways to simulate user events, one is a perfect library named 
-[`user-event`](https://github.com/testing-library/user-event), and the other way is  to use 
-[`fireEvent`](https://testing-library.com/docs/dom-testing-library/api-events) which simulated
-a copy of the DOM on Node by using jsdom. We recommend using `user-event` since it simulates the real events that would 
-happen in the browser as the user interacts with it.  
-
-To use the `user-event`, you simply need to install it:
-
-With NPM:
 
-`npm install @testing-library/user-event @testing-library/dom --save-dev`
+There are two ways to simulate user events, one is a perfect library named
+[`user-event`](https://github.com/testing-library/user-event), and the other way
+is to use
+[`fireEvent`](https://testing-library.com/docs/dom-testing-library/api-events).
+`user-event` is actually built on top of `fireEvent` which simply calls
+`dispatchEvent` on the element given. However, `user-event` is generally
+recommended because it ensures that all the events are fired in the correct
+order for typical user interactions which helps to ensure your tests resemble
+the way your software is used.
 
-With Yarn:
-
-`yarn add @testing-library/user-event @testing-library/dom --dev`
+To use the `@testing-library/user-event` module, you first need to install it:
 
+```
+npm install --save-dev @testing-library/user-event @testing-library/dom
+```
 
 Now you can import it into your test:
 
-`import userEvent from '@testing-library/user-event'`
-
+```jsx
+import userEvent from '@testing-library/user-event'
+```
 
-To demonstrate how to use `user-event` library, imagine we have a component named Checkbox, and it only shows a checkbox,
- and we want to simulate the user event with this component, here is the component:
+To demonstrate how to use `user-event` library, imagine we have a component
+named Checkbox, and it only shows a checkbox, and we want to simulate the user
+event with this component, here is the component:
 
-```
+```jsx
 // Checkbox.js
 import React from 'react'
 const Checkbox = () => {
-   return (
-       <div>
-           <label htmlFor="checkbox">Check</label>
-           <input id="checkbox" type="checkbox" />
-       </div>
-   )
+  return (
+    <div>
+      <label htmlFor="checkbox">Check</label>
+      <input id="checkbox" type="checkbox" />
+    </div>
+  )
 }
 
-export default Checkbox;
+export default Checkbox
 ```
 
-And here we want to test when a user click on the checkbox, does the value change to “checked”? So, let’s see how we 
-write a test for that case:
+And here we want to test when a user click on the checkbox, does the value
+change to “checked”? So, let's see how we write a test for that case:
 
-```
-it('should to handle click correctly', () => {
-  
-  render(<Checkbox/>)
+```jsx
+test('handles click correctly', () => {
+  render(<Checkbox />)
 
   userEvent.click(screen.getByText('Check'))
-  expect(screen.getByLabelText('Check')).toHaveAttribute('checked', true)
+  expect(screen.getByLabelText('Check')).toBeChecked()
 })
 ```
 
-Easy! With the help of other modules provided by the Testing Library, we can test our components smoothly! 
-To learn more about the `user-event` library, you can have a look at its 
+Nice! With the help of other modules provided by the Testing Library, we can
+test our components smoothly! To learn more about the `user-event` library, you
+can have a look at its
 [GitHub repository](https://github.com/testing-library/user-event#table-of-contents)
 
 ### Triggering class methods in tests (`wrapper.instance()`)
-As we already discussed, we are against testing implementation details and things that uses are not aware of it,
-and we aim to test and interact with the component like how our users would.
 
->  if your test uses instance() or state(), know that you're testing things that the user couldn't possibly
-> know about or even care about, which will take your tests further from giving you confidence that things will
-> work when your user uses them. [Kent C. Dodds](https://kentcdodds.com/blog/why-i-never-use-shallow-rendering#calling-methods-in-react-components)
+As we already discussed, we are against testing implementation details and
+things that uses are not aware of it, and we aim to test and interact with the
+component like how our users would.
+
+> if your test uses instance() or state(), know that you're testing things that
+> the user couldn't possibly know about or even care about, which will take your
+> tests further from giving you confidence that things will work when your user
+> uses them.
+> [Kent C. Dodds](https://kentcdodds.com/blog/why-i-never-use-shallow-rendering#calling-methods-in-react-components)
+
+If you're unsure how to test something internal within your component, then take
+a step back and consider: "What does the user do to trigger this code to run."
+Then make your test do that.
 
 ### How to `shallow` render a component?
-Generally, you should avoid mocking out components. However, if you need to, then it's pretty trivial 
-using [Jest's mocking](https://jestjs.io/docs/en/manual-mocks.html) 
-feature. (see our [FAQ](https://testing-library.com/docs/react-testing-library/faq))
 
+Generally, you should avoid mocking out components. However, if you need to,
+then it's pretty trivial using
+[Jest's mocking](https://jestjs.io/docs/en/manual-mocks.html) feature. (see our
+[FAQ](https://testing-library.com/docs/react-testing-library/faq))