Hooks Testing 🎣 #274

donavon · 2019-01-22T17:10:31Z

What:

Add a testHook utility

Why:

You can't call a Hook directly as it must run in context of a React component.

How:

testHook creates a component under-the-hood that calls back to the test where you can safely call the Hook. This so that the Hook can run within the context of a component, but set local deconstructed variables.

Here is an example of how to test a counter component.

test('useCounter', () => {
  let count, increment
  testHook(() => ({count, increment} = useCounter({ initialCount: 2 })))

  expect(count).toBe(2)
  increment()
  expect(count).toBe(3)
})

(see above test running live in CodeSandbox)

Any type of return types are supported in hookTester: objects, arrays, string, etc.

See discussion on #261 for more details.

Checklist:

Documentation - under a separate PR into docs repo
Tests
Ready to be merged (HOLD until Hooks is released into prod with React 16.8)
Added myself to contributors table

gnapse · 2019-01-22T17:20:40Z

Nice!

Some things off the top of my head that would be nice to add:

More info about testHook in the README (I assume you knew this one and this is WIP)
Type definitions for testHook in typings/index.d.ts
Examples of tests using testHook under examples/
Ideally some examples of using it would use something more than custom hooks based on just useState or useReducer. I'd love to see examples that showcase that testing a custom hook's side effects is also possible.

alexkrolick · 2019-01-22T18:16:22Z

Implementation looks good.

For the Readme, just adding a link to a new react-hooks example should be sufficient
Same example should go in the docs PR
Once merged, @kentcdodds can add the example to the Codesandbox
Also OK with iterating on the examples if we have at least one to start, even if it wraps a built-in hook. This can happen in the docs or Codesandbox.

This will need to be bumped to the non-alpha in a few weeks when Hooks lands in 16.8.0

donavon · 2019-01-22T18:48:50Z

I've added examples/use-counter.js but in order to test it, it requires a build of React that supports Hooks. Thus... I had to change the devDependencies for rest and react-dom to 16.8.0-alpha.1.

This will need to be bumped to the non-alpha in a few weeks when Hooks lands in 16.8.0.

So... this PR should be held and not merged until Hooks lands in production.

donavon · 2019-01-22T18:56:42Z

README updated with link to use-counter example.

examples/__tests__/use-counter.js

alexkrolick · 2019-01-23T08:14:40Z

package.json

-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "react": "16.8.0-alpha.1",
+    "react-dom": "16.8.0-alpha.1",


What if we put ^16.5.2 || 16.8.0-alpha.1 here?

Looks like it resolves 16.7.0 (no pre-release) https://semver.npmjs.com/

The version here will have to be something that gets us hooks otherwise our tests will fail. Our peerDependencies thing is what matters most anyway.

alexkrolick · 2019-01-23T08:25:37Z

@kentcdodds @donavon what do you think of removing the examples folder in favor of the pages in the docs with the same code, and the Codesandbox? Then we don't have to worry about the package version or dependencies for the examples.

Another idea is to make a package.json for the examples folder.

src/__tests__/testHook.js

kentcdodds

Seems like hooks are getting released soon so I'm fine waiting to merge this until hooks are stable (then we can update the devDependency to reference a stable react version).

kentcdodds · 2019-01-24T03:24:15Z

package.json

-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "react": "16.8.0-alpha.1",
+    "react-dom": "16.8.0-alpha.1",


The version here will have to be something that gets us hooks otherwise our tests will fail. Our peerDependencies thing is what matters most anyway.

examples/react-hooks.js

kentcdodds · 2019-01-24T03:26:17Z

typings/index.d.ts

+/**
+ * Renders a test component that calls back to the test.
+ */
+export function testHook(callback: () => void): void


Do we need to do anything special to indicate that the callback will be called with the result of the custom hook (so you can get type safety there) or is TypeScript's inference good enough to know?

the callback isn't called with anything and isn't required to return anything. i'm not a TS expert, so I'll defer, but this should work.

src/index.js

kentcdodds · 2019-01-24T03:28:08Z

Oh, also, THANK YOU A TON @donavon!

donavon · 2019-01-24T17:28:24Z

Of course @kentcdodds.

I think we should be ready to release testHook on the same day that 16.8.0 drops (i.e. ride the hype), which could be any day now.

I'll work to get things tied up with the PR. Then, when we're satisfied, I'll pre-update the dependencies to say 16.8.0. This will, of course, fail in Travis as there isn't a 16.8.0 today.

But the second 16.8.0 drops, all you have to do it re-run the job in Travis (it should pass, hopefully anyway 🤞) then merge the PR.

However, I'm on PTO starting Monday and don't think I'll have the time between now and then to write the useEffect example as I'm swamped with other stuff as well. Could this some at a later date or as a separate PR?

alexkrolick · 2019-01-24T17:45:10Z

But the second 16.8.0 drops, all you have to do it re-run the job in Travis (it should pass, hopefully anyway 🤞) then merge the PR.

facebook/react#14692

Better get this ready 🚦😉

kentcdodds · 2019-01-24T17:54:38Z

That all sounds fine @donavon 👍

donavon · 2019-01-24T18:02:40Z

@alexkrolick 😱

NOTE: Travis should FAIL with this commit. Re-run the job when React 16.8.0 drops (soon).

donavon · 2019-01-24T19:02:21Z

dependencies updated and Travis build failed (as it should). with this, we should be ready to go! my work is done here. 😉

let me know if you need anything else.

examples/__tests__/react-hooks.js

antsmartian

LGTM..

antsmartian · 2019-02-05T16:25:47Z

@donavon Thank you so much for this PR. The code looks good to me, as Kent mentioned, we can fix some nits and get this asap when hooks are available! 👍

alexkrolick · 2019-02-05T18:43:53Z

We should check out the new test utils API in reactjs/react.dev#1629

kentcdodds · 2019-02-05T18:44:40Z

The React team consulted with me about this. As soon as the new version lands I'll personally take on the work of updating things to work with hooks and their new APIs.

alexkrolick · 2019-02-05T18:51:24Z

Ok great @kentcdodds 👍

kentcdodds · 2019-02-05T22:32:03Z

Changed this to next branch so I can release this along with other changes to prepare for hooks.

kripod · 2019-06-14T15:25:49Z

What happened to this feature? Unfortunately, I cannot find it anywhere...

bcarroll22 · 2019-06-14T17:25:42Z

👋 you’ll wanna check out react-hooks-testing-library if you’re testing custom hooks that you share between components.

Otherwise, testing hooks via user interactions like clicks, etc. works just like anything else would with this library.

Good luck!

alexkrolick · 2019-06-14T18:34:17Z

We should finish the PR to add that lib to the docs

tomstuart · 2019-06-15T09:25:33Z

@kripod Here’s the information you’re missing: #302

donavon added 4 commits January 22, 2019 11:55

add contributor and update readme

9066eff

add testHook to index

4febf70

add react in peerDependencies

04b5ff6

test it!

691b45c

donavon mentioned this pull request Jan 22, 2019

Add utility for testing custom hooks #261

Closed

update typings

95992b1

donavon added 2 commits January 22, 2019 13:42

require React 16.8.0-alpha.1 devDependencies

5b2ef64

This will need to be bumped to the non-alpha in a few weeks when Hooks lands in 16.8.0

example/use-counter plus tests

c686462

add link to use-counter example to readme

2adfed0

alexkrolick reviewed Jan 22, 2019

View reviewed changes

examples/__tests__/use-counter.js Outdated Show resolved Hide resolved

donavon added 2 commits January 22, 2019 14:11

rename use-counter to react-hooks

b2d78bf

add another test

83e2ef5

alexkrolick reviewed Jan 23, 2019

View reviewed changes

src/__tests__/testHook.js Show resolved Hide resolved

kentcdodds requested changes Jan 24, 2019

View reviewed changes

donavon added 2 commits January 24, 2019 13:45

define testHook as a function vs. const

92b0c38

update the -alpha.1 in package.json

8ae6804

NOTE: Travis should FAIL with this commit. Re-run the job when React 16.8.0 drops (soon).

alexkrolick mentioned this pull request Jan 24, 2019

Add docs for react-hooks-testing-library testing-library/testing-library-docs#20

Closed

mAAdhaTTah reviewed Jan 24, 2019

View reviewed changes

examples/__tests__/react-hooks.js Show resolved Hide resolved

antsmartian approved these changes Feb 5, 2019

View reviewed changes

alexkrolick mentioned this pull request Feb 5, 2019

Update docs for stable Hooks reactjs/react.dev#1629

Merged

kentcdodds changed the base branch from master to next February 5, 2019 22:31

kentcdodds merged commit 6388adf into testing-library:next Feb 5, 2019

kentcdodds pushed a commit that referenced this pull request Feb 6, 2019

feat(testHook): add testHook utility for Testing custom hooks 🎣 (#274)

d01fbc1

alexkrolick mentioned this pull request Feb 12, 2019

Return value of hook run with testHook? #295

Closed

lucbpz pushed a commit to lucbpz/react-testing-library that referenced this pull request Jul 26, 2020

fix(TS): add init type for click() (testing-library#274)

cc01536

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hooks Testing 🎣 #274

Hooks Testing 🎣 #274

donavon commented Jan 22, 2019 •

edited

Loading

gnapse commented Jan 22, 2019

alexkrolick commented Jan 22, 2019

donavon commented Jan 22, 2019

donavon commented Jan 22, 2019

alexkrolick Jan 23, 2019

alexkrolick Jan 23, 2019

kentcdodds Jan 24, 2019

alexkrolick commented Jan 23, 2019 •

edited

Loading

kentcdodds left a comment

kentcdodds Jan 24, 2019

kentcdodds Jan 24, 2019

donavon Jan 24, 2019

kentcdodds commented Jan 24, 2019

donavon commented Jan 24, 2019

alexkrolick commented Jan 24, 2019

kentcdodds commented Jan 24, 2019

donavon commented Jan 24, 2019

donavon commented Jan 24, 2019

antsmartian left a comment

antsmartian commented Feb 5, 2019

alexkrolick commented Feb 5, 2019

kentcdodds commented Feb 5, 2019

alexkrolick commented Feb 5, 2019

kentcdodds commented Feb 5, 2019

kripod commented Jun 14, 2019

bcarroll22 commented Jun 14, 2019

alexkrolick commented Jun 14, 2019

tomstuart commented Jun 15, 2019

Hooks Testing 🎣 #274

Hooks Testing 🎣 #274

Conversation

donavon commented Jan 22, 2019 • edited Loading

gnapse commented Jan 22, 2019

alexkrolick commented Jan 22, 2019

donavon commented Jan 22, 2019

donavon commented Jan 22, 2019

alexkrolick Jan 23, 2019

Choose a reason for hiding this comment

alexkrolick Jan 23, 2019

Choose a reason for hiding this comment

kentcdodds Jan 24, 2019

Choose a reason for hiding this comment

alexkrolick commented Jan 23, 2019 • edited Loading

kentcdodds left a comment

Choose a reason for hiding this comment

kentcdodds Jan 24, 2019

Choose a reason for hiding this comment

kentcdodds Jan 24, 2019

Choose a reason for hiding this comment

donavon Jan 24, 2019

Choose a reason for hiding this comment

kentcdodds commented Jan 24, 2019

donavon commented Jan 24, 2019

alexkrolick commented Jan 24, 2019

kentcdodds commented Jan 24, 2019

donavon commented Jan 24, 2019

donavon commented Jan 24, 2019

antsmartian left a comment

Choose a reason for hiding this comment

antsmartian commented Feb 5, 2019

alexkrolick commented Feb 5, 2019

kentcdodds commented Feb 5, 2019

alexkrolick commented Feb 5, 2019

kentcdodds commented Feb 5, 2019

kripod commented Jun 14, 2019

bcarroll22 commented Jun 14, 2019

alexkrolick commented Jun 14, 2019

tomstuart commented Jun 15, 2019

donavon commented Jan 22, 2019 •

edited

Loading

alexkrolick commented Jan 23, 2019 •

edited

Loading