Add support for TypeScript #8
+157
−7
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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, R>( | ||
| callback: (props: P) => R, | ||
| options?: { | ||
| initialProps?: P | ||
| } & RenderOptions | ||
| ): { | ||
| readonly result: { | ||
| current: R | ||
| } | ||
| readonly unmount: RenderResult['unmount'] | ||
| readonly rerender: (hookProps?: P) => void | ||
| } | ||
|
|
||
| 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 } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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", | ||||
|
|
||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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') | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import { useState, useCallback, useEffect } 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 | ||
| } | ||
|
|
||
| function checkTypesWhenHookReturnsVoid() { | ||
| const { result, unmount, rerender } = renderHook(() => useEffect(() => {})) | ||
|
|
||
| // check types | ||
| const _result: { | ||
| current: void | ||
| } = result | ||
| const _unmount: () => boolean = unmount | ||
| const _rerender: () => void = rerender | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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"] | ||
| } | ||
| } | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
Feels unnecessary to have
?here. If thePis inferred asundefined, it should be ok. Otherwise, it should be required to pass the props if there were some initially to avoid surprising results.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.
Looking at the implementation of the
rerenderfunction, it seems thathookProps.currentis assigned as a default value. (hookProps.currentis the same asinitialProps)https://github.com/mpeyper/react-hooks-testing-library/blob/f7cd61035d8fb08cbfac376a5a8da1780708a64e/src/index.js#L26
As long as I see this, we can call
rerenderfunction with no argument orinitialProps.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.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
useEffect,useLayoutEffect,useMemoanduseCallback) can be reliably tested.