simplify things

Author: Kent C. Dodds

client/src/components/__tests__/login.final.js

@@ -1,10 +1,6 @@
 import React from 'react'
-import {
-  generate,
-  renderIntoDocument,
-  cleanup,
-  render,
-} from 'til-client-test-utils'
+import {generate} from 'til-client-test-utils'
+import {render, renderIntoDocument, cleanup} from 'react-testing-library'
 import Login from '../login'
 
 afterEach(cleanup)

client/src/components/__tests__/login.step-1.todo.js

@@ -1,3 +1,4 @@
+// Basic unit test
 test('calls onSubmit with the username and password when submitted', () => {
   // Arrange
   // create a fake object to hold the form field values (username and password)

client/src/components/__tests__/login.step-2.js

@@ -1,5 +1,6 @@
 import React from 'react'
-import {generate, render, Simulate} from 'til-client-test-utils'
+import {generate} from 'til-client-test-utils'
+import {render, Simulate} from 'react-testing-library'
 import Login from '../login'
 
 test('calls onSubmit with the username and password when submitted', () => {

client/src/components/__tests__/login.step-2.todo.js

@@ -1,9 +1,10 @@
+// using helpful utilities
 import React from 'react'
 import ReactDOM from 'react-dom'
 // you'll need these:
-// import {generate, render, Simulate} from 'til-client-test-utils'
+// import {generate} from 'til-client-test-utils'
+// import {render, Simulate} from 'react-testing-library'
 // note that til-client-test-utils is found in `client/test/til-client-test-utils`
-// and it re-exports some utilities from react-testing-library (like render and Simulate)
 import Login from '../login'
 
 test('calls onSubmit with the username and password when submitted', () => {

client/src/components/__tests__/login.step-3.js

@@ -1,5 +1,6 @@
 import React from 'react'
-import {generate, renderIntoDocument, cleanup} from 'til-client-test-utils'
+import {generate} from 'til-client-test-utils'
+import {renderIntoDocument, cleanup} from 'react-testing-library'
 import Login from '../login'
 
 // If you render your components with renderIntoDocument via react-testing-library

client/src/components/__tests__/login.step-3.todo.js

@@ -1,5 +1,7 @@
+// dealing with react's simulated events
 import React from 'react'
-import {generate, render, Simulate} from 'til-client-test-utils'
+import {generate} from 'til-client-test-utils'
+import {render, Simulate} from 'react-testing-library'
 import Login from '../login'
 
 // Due to the fact that our element is not in the document, the
@@ -16,6 +18,9 @@ import Login from '../login'
 //
 // Bonus: Don't forget to cleanup after yourselve when you're finished so you don't
 // have things hanging out in the document!
+//
+// Extra bonus, rather than manually inserting the container into the document
+// check out the docs for react-testing-library and the renderIntoDocument method!
 
 test('calls onSubmit with the username and password when submitted', () => {
   // Arrange

client/src/components/__tests__/login.step-4.js

@@ -1,10 +1,6 @@
 import React from 'react'
-import {
-  generate,
-  renderIntoDocument,
-  render,
-  cleanup,
-} from 'til-client-test-utils'
+import {generate} from 'til-client-test-utils'
+import {render, renderIntoDocument, cleanup} from 'react-testing-library'
 import Login from '../login'
 
 afterEach(cleanup)

client/src/components/__tests__/login.step-4.todo.js

@@ -1,5 +1,7 @@
+// snapshot testing
 import React from 'react'
-import {generate, renderIntoDocument, cleanup} from 'til-client-test-utils'
+import {generate} from 'til-client-test-utils'
+import {renderIntoDocument, cleanup} from 'react-testing-library'
 import Login from '../login'
 
 afterEach(cleanup)

other/simple-react/__tests__/item-list.todo.js

@@ -22,7 +22,8 @@
 //   Render your component (tip: use ReactDOM.render(JSX, container))
 //
 //   Make your assertion(s) on the textContent of the container
-//   (tip: expect's toMatch function might be what you want)
+//   (tip: expect's toMatch function might be what you want
+//   for example: `expect('some text content').toMatch('text')`)
 //
 // For your second test, it will be very similar to the first.