From d8a3741b83a331997cc539491772bdb4d688dcc1 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Thu, 19 Apr 2018 00:04:32 -0500 Subject: [PATCH] simplify things --- client/src/components/__tests__/login.final.js | 8 ++------ client/src/components/__tests__/login.step-1.todo.js | 1 + client/src/components/__tests__/login.step-2.js | 3 ++- client/src/components/__tests__/login.step-2.todo.js | 5 +++-- client/src/components/__tests__/login.step-3.js | 3 ++- client/src/components/__tests__/login.step-3.todo.js | 7 ++++++- client/src/components/__tests__/login.step-4.js | 8 ++------ client/src/components/__tests__/login.step-4.todo.js | 4 +++- other/simple-react/__tests__/item-list.todo.js | 3 ++- 9 files changed, 23 insertions(+), 19 deletions(-) diff --git a/client/src/components/__tests__/login.final.js b/client/src/components/__tests__/login.final.js index 506ec2fe..bb673733 100644 --- a/client/src/components/__tests__/login.final.js +++ b/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) diff --git a/client/src/components/__tests__/login.step-1.todo.js b/client/src/components/__tests__/login.step-1.todo.js index 4a7ba114..4fc17a9c 100644 --- a/client/src/components/__tests__/login.step-1.todo.js +++ b/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) diff --git a/client/src/components/__tests__/login.step-2.js b/client/src/components/__tests__/login.step-2.js index 84f56633..9ecb4bac 100644 --- a/client/src/components/__tests__/login.step-2.js +++ b/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', () => { diff --git a/client/src/components/__tests__/login.step-2.todo.js b/client/src/components/__tests__/login.step-2.todo.js index 2871e37d..e6cba539 100644 --- a/client/src/components/__tests__/login.step-2.todo.js +++ b/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', () => { diff --git a/client/src/components/__tests__/login.step-3.js b/client/src/components/__tests__/login.step-3.js index 909b582f..02d6ab1b 100644 --- a/client/src/components/__tests__/login.step-3.js +++ b/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 diff --git a/client/src/components/__tests__/login.step-3.todo.js b/client/src/components/__tests__/login.step-3.todo.js index 2e51c26d..d4a80fc3 100644 --- a/client/src/components/__tests__/login.step-3.todo.js +++ b/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 diff --git a/client/src/components/__tests__/login.step-4.js b/client/src/components/__tests__/login.step-4.js index ba76da8d..6ff4e82d 100644 --- a/client/src/components/__tests__/login.step-4.js +++ b/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) diff --git a/client/src/components/__tests__/login.step-4.todo.js b/client/src/components/__tests__/login.step-4.todo.js index e0dd2203..50803b14 100644 --- a/client/src/components/__tests__/login.step-4.todo.js +++ b/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) diff --git a/other/simple-react/__tests__/item-list.todo.js b/other/simple-react/__tests__/item-list.todo.js index e0e75a76..fe4d03d7 100644 --- a/other/simple-react/__tests__/item-list.todo.js +++ b/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.