Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Bring typings from DefinitelyTyped into this repo #690

Merged
merged 2 commits into from Jun 4, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 0 additions & 1 deletion index.d.ts

This file was deleted.

10 changes: 7 additions & 3 deletions package.json
Expand Up @@ -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"
Expand All @@ -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",
Expand All @@ -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",
Expand Down
59 changes: 59 additions & 0 deletions types/index.d.ts
@@ -0,0 +1,59 @@
// TypeScript Version: 3.8
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


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
1 change: 1 addition & 0 deletions types/pure.d.ts
@@ -0,0 +1 @@
export * from './'
70 changes: 70 additions & 0 deletions 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(<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(() => {})
}
19 changes: 19 additions & 0 deletions types/tsconfig.json
@@ -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": ["."]
}
}
}
9 changes: 9 additions & 0 deletions types/tslint.json
@@ -0,0 +1,9 @@
{
"extends": ["dtslint/dtslint.json"],
"rules": {
"no-useless-files": false,
"no-relative-import-in-test": false,
"semicolon": false,
"whitespace": false
}
}