feat(TS): move typings from DefinitelyTyped into this repo (#690)

* Bring typings from DefinitelyTyped into this repo

Closes #688

* Add missing types and configs

Add `pure.d.ts` that re-exports everything from `index.d.ts`
Turn off `whitespace` rule

Co-authored-by: Sam Tsai <[email protected]>

Author: samtsai

index.d.ts

@@ -3,6 +3,7 @@
   "version": "0.0.0-semantically-released",
   "description": "Simple and complete React DOM testing utilities that encourage good testing practices.",
   "main": "dist/index.js",
+  "types": "types/index.d.ts",
   "module": "dist/@testing-library/react.esm.js",
   "engines": {
     "node": ">=10"
@@ -17,12 +18,14 @@
     "setup": "npm install && npm run validate -s",
     "test": "kcd-scripts test",
     "test:update": "npm test -- --updateSnapshot --coverage",
+    "typecheck": "dtslint ./types/",
     "validate": "kcd-scripts validate"
   },
   "files": [
     "dist",
     "dont-cleanup-after-each.js",
-    "pure.js"
+    "pure.js",
+    "types"
   ],
   "keywords": [
     "testing",
@@ -40,13 +43,14 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.10.2",
-    "@testing-library/dom": "^7.9.0",
-    "@types/testing-library__react": "^10.0.1"
+    "@testing-library/dom": "^7.9.0"
   },
   "devDependencies": {
     "@reach/router": "^1.3.3",
     "@testing-library/jest-dom": "^5.9.0",
+    "@types/react-dom": "^16.9.8",
     "dotenv-cli": "^3.1.0",
+    "dtslint": "3.6.9",
     "kcd-scripts": "^6.2.0",
     "npm-run-all": "^4.1.5",
     "react": "^16.13.1",

package.json

@@ -0,0 +1,59 @@
+// TypeScript Version: 3.8
+
+import {OptionsReceived as PrettyFormatOptions} from 'pretty-format'
+import {queries, Queries, BoundFunction} from '@testing-library/dom'
+import {act as reactAct} from 'react-dom/test-utils'
+
+export * from '@testing-library/dom'
+
+export type RenderResult<Q extends Queries = typeof queries> = {
+  container: HTMLElement
+  baseElement: HTMLElement
+  debug: (
+    baseElement?:
+      | HTMLElement
+      | DocumentFragment
+      | Array<HTMLElement | DocumentFragment>,
+    maxLength?: number,
+    options?: PrettyFormatOptions,
+  ) => void
+  rerender: (ui: React.ReactElement) => void
+  unmount: () => boolean
+  asFragment: () => DocumentFragment
+} & {[P in keyof Q]: BoundFunction<Q[P]>}
+
+export interface RenderOptions<Q extends Queries = typeof queries> {
+  container?: HTMLElement
+  baseElement?: HTMLElement
+  hydrate?: boolean
+  queries?: Q
+  wrapper?: React.ComponentType
+}
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
+
+/**
+ * Render into a container which is appended to document.body. It should be used with cleanup.
+ */
+export function render(
+  ui: React.ReactElement,
+  options?: Omit<RenderOptions, 'queries'>,
+): RenderResult
+export function render<Q extends Queries>(
+  ui: React.ReactElement,
+  options: RenderOptions<Q>,
+): RenderResult<Q>
+
+/**
+ * Unmounts React trees that were mounted with render.
+ */
+export function cleanup(): Promise<void>
+
+/**
+ * Simply calls ReactDOMTestUtils.act(cb)
+ * If that's not available (older version of react) then it
+ * simply calls the given callback immediately
+ */
+export const act: typeof reactAct extends undefined
+  ? (callback: () => void) => void
+  : typeof reactAct

types/index.d.ts

@@ -0,0 +1 @@
+export * from './'

types/pure.d.ts

@@ -0,0 +1,70 @@
+import * as React from 'react'
+import {render, fireEvent, screen, waitFor} from '@testing-library/react'
+import * as pure from '@testing-library/react/pure'
+
+async function testRender() {
+  const page = render(<div />)
+
+  // single queries
+  page.getByText('foo')
+  page.queryByText('foo')
+  await page.findByText('foo')
+
+  // multiple queries
+  page.getAllByText('bar')
+  page.queryAllByText('bar')
+  await page.findAllByText('bar')
+
+  // helpers
+  const {container, rerender, debug} = page
+}
+
+async function testPureRender() {
+  const page = pure.render(<div />)
+
+  // single queries
+  page.getByText('foo')
+  page.queryByText('foo')
+  await page.findByText('foo')
+
+  // multiple queries
+  page.getAllByText('bar')
+  page.queryAllByText('bar')
+  await page.findAllByText('bar')
+
+  // helpers
+  const {container, rerender, debug} = page
+}
+
+async function testRenderOptions() {
+  const container = document.createElement('div')
+  const options = {container}
+  render(<div />, options)
+}
+
+async function testFireEvent() {
+  const {container} = render(<button />)
+  fireEvent.click(container)
+}
+
+async function testDebug() {
+  const {debug, getAllByTestId} = render(
+    <>
+      <h2 data-testid="testid">Hello World</h2>
+      <h2 data-testid="testid">Hello World</h2>
+    </>,
+  )
+  debug(getAllByTestId('testid'))
+}
+
+async function testScreen() {
+  render(<button />)
+
+  screen.findByRole('button')
+}
+
+async function testWaitFor() {
+  const {container} = render(<button />)
+  fireEvent.click(container)
+  await waitFor(() => {})
+}

types/test.tsx

@@ -0,0 +1,19 @@
+// this additional tsconfig is required by dtslint
+// see: https://github.com/Microsoft/dtslint#typestsconfigjson
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": ["es6", "dom"],
+    "jsx": "react",
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@testing-library/react": ["."],
+      "@testing-library/react/pure": ["."]
+    }
+  }
+}

types/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": ["dtslint/dtslint.json"],
+  "rules": {
+    "no-useless-files": false,
+    "no-relative-import-in-test": false,
+    "semicolon": false,
+    "whitespace": false
+  }
+}