diff --git a/index.d.ts b/index.d.ts deleted file mode 100644 index e50a1e7c..00000000 --- a/index.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from 'testing-library__react' diff --git a/package.json b/package.json index cb9f9324..9bf9b277 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/types/index.d.ts b/types/index.d.ts new file mode 100644 index 00000000..09824704 --- /dev/null +++ b/types/index.d.ts @@ -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 = { + container: HTMLElement + baseElement: HTMLElement + debug: ( + baseElement?: + | HTMLElement + | DocumentFragment + | Array, + maxLength?: number, + options?: PrettyFormatOptions, + ) => void + rerender: (ui: React.ReactElement) => void + unmount: () => boolean + asFragment: () => DocumentFragment +} & {[P in keyof Q]: BoundFunction} + +export interface RenderOptions { + container?: HTMLElement + baseElement?: HTMLElement + hydrate?: boolean + queries?: Q + wrapper?: React.ComponentType +} + +type Omit = Pick> + +/** + * Render into a container which is appended to document.body. It should be used with cleanup. + */ +export function render( + ui: React.ReactElement, + options?: Omit, +): RenderResult +export function render( + ui: React.ReactElement, + options: RenderOptions, +): RenderResult + +/** + * Unmounts React trees that were mounted with render. + */ +export function cleanup(): Promise + +/** + * 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 diff --git a/types/pure.d.ts b/types/pure.d.ts new file mode 100644 index 00000000..7b527195 --- /dev/null +++ b/types/pure.d.ts @@ -0,0 +1 @@ +export * from './' diff --git a/types/test.tsx b/types/test.tsx new file mode 100644 index 00000000..c273feb0 --- /dev/null +++ b/types/test.tsx @@ -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(
) + + // 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(
) + + // 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(
, options) +} + +async function testFireEvent() { + const {container} = render(