Add support for TypeScript #8
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,18 @@ | ||||||
| import { cleanup, act, RenderOptions, RenderResult } from 'react-testing-library' | ||||||
|
|
||||||
| export function renderHook<P extends any, R extends any>( | ||||||
| callback: (...args: [P]) => R, | ||||||
otofu-square marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
| options?: { | ||||||
| initialProps?: P | ||||||
| } & RenderOptions | ||||||
| ): { | ||||||
| readonly result: { | ||||||
| current: R | ||||||
| } | ||||||
| readonly unmount: RenderResult['unmount'] | ||||||
| readonly rerender: (hookProps?: P) => void | ||||||
|
There was a problem hiding this comment. Feels unnecessary to have
Suggested change
There was a problem hiding this comment. Looking at the implementation of the As long as I see this, we can call There was a problem hiding this comment. I see, so it will use initialProps if none are passed. Makes sense I guess although it feels less explicit and might be confusing for tests. There was a problem hiding this comment. Correct. Subsequent rerenders will use the previously supplied props until new props are supplied. The idea is that the props don't change until the hook is rendered with new props, so hooks that use a conditional array (i.e. |
||||||
| } | ||||||
|
|
||||||
| export const testHook: typeof renderHook | ||||||
|
There was a problem hiding this comment. It'll be unnecessary someday, but it 's so smart 👍 |
||||||
|
|
||||||
| export { cleanup, act } | ||||||
| Original file line number | Diff line number | Diff line change | ||
|---|---|---|---|---|
|
|
@@ -3,6 +3,7 @@ | |||
| "version": "0.3.4", | ||||
| "description": "Simple component wrapper for testing React hooks", | ||||
| "main": "lib/index.js", | ||||
| "typings": "./index.d.ts", | ||||
| "author": "Michael Peyper", | ||||
| "repository": { | ||||
| "type": "git", | ||||
|
|
@@ -26,6 +27,7 @@ | |||
| "@babel/plugin-transform-modules-commonjs": "^7.2.0", | ||||
| "@babel/preset-env": "^7.3.4", | ||||
| "@babel/preset-react": "^7.0.0", | ||||
| "@types/react": "^16.8.5", | ||||
|
There was a problem hiding this comment. Where does it depend on React types actually? I don't see any reference to it.
Suggested change
There was a problem hiding this comment. It's necessary to use React hooks in the typing test. |
||||
| "all-contributors-cli": "^6.1.2", | ||||
| "babel-eslint": "^10.0.1", | ||||
| "babel-plugin-module-resolver": "^3.2.0", | ||||
|
|
@@ -39,7 +41,9 @@ | |||
| "prettier-eslint": "^8.8.2", | ||||
| "prettier-eslint-cli": "^4.7.1", | ||||
| "react": "^16.8.3", | ||||
| "react-dom": "^16.8.3", | ||||
| "typescript": "^3.3.3333", | ||||
| "typings-tester": "^0.3.2" | ||||
| }, | ||||
| "peerDependencies": { | ||||
| "react": "^16.8.0", | ||||
|
|
||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import { checkDirectory } from 'typings-tester' | ||
|
|
||
| describe('TypeScript definitions', function() { | ||
| it('should compile against index.d.ts', () => { | ||
| checkDirectory(__dirname + '/typescript') | ||
| }) | ||
| }) |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { useState, useCallback } from 'react' | ||
| import { renderHook } from 'react-hooks-testing-library' | ||
|
|
||
| const useCounter = (initialCount: number = 0) => { | ||
| const [count, setCount] = useState(initialCount) | ||
| const incrementBy = useCallback( | ||
| (n: number) => { | ||
| setCount(count + n) | ||
| }, | ||
| [count] | ||
| ) | ||
| const decrementBy = useCallback( | ||
| (n: number) => { | ||
| setCount(count - n) | ||
| }, | ||
| [count] | ||
| ) | ||
| return { | ||
| count, | ||
| incrementBy, | ||
| decrementBy | ||
| } | ||
| } | ||
|
|
||
| function checkTypesWithNoInitialProps() { | ||
| const { result, unmount, rerender } = renderHook(() => useCounter()) | ||
|
|
||
| // check types | ||
| const _result: { | ||
| current: { | ||
| count: number | ||
| incrementBy: (_: number) => void | ||
| decrementBy: (_: number) => void | ||
| } | ||
| } = result | ||
| const _unmount: () => boolean = unmount | ||
| const _rerender: () => void = rerender | ||
| } | ||
|
|
||
| function checkTypesWithInitialProps() { | ||
| const { result, unmount, rerender } = renderHook(({ count }) => useCounter(count), { | ||
| initialProps: { count: 10 } | ||
| }) | ||
|
|
||
| // check types | ||
| const _result: { | ||
| current: { | ||
| count: number | ||
| incrementBy: (_: number) => void | ||
| decrementBy: (_: number) => void | ||
| } | ||
| } = result | ||
| const _unmount: () => boolean = unmount | ||
| const _rerender: (_?: { count: number }) => void = rerender | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "lib": ["es2015", "dom"], | ||
| "strict": true, | ||
| "baseUrl": "../../", | ||
| "paths": { | ||
| "react-hooks-testing-library": ["index.d.ts"] | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what is the difference between
renderHook<P extends any, R extends any>andrenderHook<P, R>?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
rednerHook<P, R>is the same asrenderHook<P extends Object, R extends Object>.Maybe it's more simple to use
<P, R>instead of<P extends any, R extends any>sincePandRwill be inferred by givingcallback&initialProps.