diff --git a/.all-contributorsrc b/.all-contributorsrc index 969492a6..fd8b11c6 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -24,6 +24,15 @@ "test", "tool" ] + }, + { + "login": "otofu-square", + "name": "otofu-square", + "avatar_url": "https://avatars0.githubusercontent.com/u/10118235?v=4", + "profile": "https://github.com/otofu-square", + "contributions": [ + "code" + ] } ] } diff --git a/README.md b/README.md index 84b0efc8..3c055967 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Simple component wrapper and utilities for testing React hooks. [![downloads](https://img.shields.io/npm/dm/react-hooks-testing-library.svg?style=flat-square)](http://www.npmtrends.com/react-hooks-testing-library) [![MIT License](https://img.shields.io/npm/l/react-hooks-testing-library.svg?style=flat-square)](https://github.com/mpeyper/react-hooks-testing-library/blob/master/LICENSE.md) -[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors) +[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![Code of Conduct](https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square)](https://github.com/mpeyper/react-hooks-testing-library/blob/master/CODE_OF_CONDUCT.md) @@ -156,8 +156,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds -| [
Michael Peyper](https://github.com/mpeyper)
[💻](https://github.com/mpeyper/react-hooks-testing-library/commits?author=mpeyper "Code") [🎨](#design-mpeyper "Design") [📖](https://github.com/mpeyper/react-hooks-testing-library/commits?author=mpeyper "Documentation") [🤔](#ideas-mpeyper "Ideas, Planning, & Feedback") [🚇](#infra-mpeyper "Infrastructure (Hosting, Build-Tools, etc)") [📦](#platform-mpeyper "Packaging/porting to new platform") [⚠️](https://github.com/mpeyper/react-hooks-testing-library/commits?author=mpeyper "Tests") [🔧](#tool-mpeyper "Tools") | -| :---: | +
Michael Peyper
Michael Peyper
💻 🎨 📖 🤔 🚇 📦 ⚠️ 🔧		otofu-square
otofu-square
💻
diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 00000000..b5ba0267 --- /dev/null +++ b/index.d.ts @@ -0,0 +1,18 @@ +import { cleanup, act, RenderOptions, RenderResult } from 'react-testing-library' + +export function renderHook( + 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 + +export { cleanup, act } diff --git a/package-lock.json b/package-lock.json index 88e301c9..6a48268e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1058,6 +1058,22 @@ "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz", "integrity": "sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==" }, + "@types/prop-types": { + "version": "15.7.0", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.0.tgz", + "integrity": "sha512-eItQyV43bj4rR3JPV0Skpl1SncRCdziTEK9/v8VwXmV6d/qOUO8/EuWeHBbCZcsfSHfzI5UyMJLCSXtxxznyZg==", + "dev": true + }, + "@types/react": { + "version": "16.8.5", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.5.tgz", + "integrity": "sha512-8LRySaaSJVLNZb2dbOGvGmzn88cbAfrgDpuWy+6lLgQ0OJFgHHvyuaCX4/7ikqJlpmCPf4uazJAZcfTQRdJqdQ==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "csstype": "^2.2.0" + } + }, "abab": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.0.tgz", @@ -2115,6 +2131,12 @@ "cssom": "0.3.x" } }, + "csstype": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.2.tgz", + "integrity": "sha512-Rl7PvTae0pflc1YtxtKbiSqq20Ts6vpIYOD5WBafl4y123DyHUeLrRdQP66sQW8/6gmX8jrYJLXwNeMqYVJcow==", + "dev": true + }, "dashdash": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", @@ -6349,6 +6371,12 @@ "string-width": "^2.1.1" } }, + "typescript": { + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz", + "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==", + "dev": true + }, "write": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/write/-/write-0.2.1.tgz", @@ -8155,9 +8183,9 @@ "dev": true }, "typescript": { - "version": "2.9.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz", - "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==", + "version": "3.3.3333", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.3333.tgz", + "integrity": "sha512-JjSKsAfuHBE/fB2oZ8NxtRTk5iGcg6hkYXMnZ3Wc+b2RSqejEqTaem11mHASMnFilHrax3sLK0GDzcJrekZYLw==", "dev": true }, "typescript-eslint-parser": { @@ -8178,6 +8206,15 @@ } } }, + "typings-tester": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/typings-tester/-/typings-tester-0.3.2.tgz", + "integrity": "sha512-HjGoAM2UoGhmSKKy23TYEKkxlphdJFdix5VvqWFLzH1BJVnnwG38tpC6SXPgqhfFGfHY77RlN1K8ts0dbWBQ7A==", + "dev": true, + "requires": { + "commander": "^2.12.2" + } + }, "uglify-js": { "version": "3.4.9", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz", diff --git a/package.json b/package.json index 6a4dda5b..d3c4c589 100644 --- a/package.json +++ b/package.json @@ -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", "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" + "react-dom": "^16.8.3", + "typescript": "^3.3.3333", + "typings-tester": "^0.3.2" }, "peerDependencies": { "react": "^16.8.0", diff --git a/test/typescript.test.js b/test/typescript.test.js new file mode 100644 index 00000000..e2f25f19 --- /dev/null +++ b/test/typescript.test.js @@ -0,0 +1,7 @@ +import { checkDirectory } from 'typings-tester' + +describe('TypeScript definitions', function() { + it('should compile against index.d.ts', () => { + checkDirectory(__dirname + '/typescript') + }) +}) diff --git a/test/typescript/renderHook.ts b/test/typescript/renderHook.ts new file mode 100644 index 00000000..78892a53 --- /dev/null +++ b/test/typescript/renderHook.ts @@ -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 +} diff --git a/test/typescript/tsconfig.json b/test/typescript/tsconfig.json new file mode 100644 index 00000000..9d5e6686 --- /dev/null +++ b/test/typescript/tsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "lib": ["es2015", "dom"], + "strict": true, + "baseUrl": "../../", + "paths": { + "react-hooks-testing-library": ["index.d.ts"] + } + } +}