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

Adding @testing-library/jest-dom type definitions #37688

Closed
wants to merge 2 commits into from
Closed
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
35 changes: 35 additions & 0 deletions types/testing-library__jest-dom/index.d.ts
@@ -0,0 +1,35 @@
// Type definitions for @testing-library/jest-dom 4.0
// Project: https://github.com/testing-library/jest-dom
// Definitions by: Damien Senger <https://github.com/hiwelo>
// Łukasz Fiszer <https://github.com/lukaszfiszer>
// Revath S Kumar <https://github.com/revathskumar>
// Ernesto García <https://github.com/gnapse>
// Weyert de Boer <https://github.com/weyert>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 3.0
Copy link
Contributor

Choose a reason for hiding this comment

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

According to https://github.com/testing-library/jest-dom#usage this you need to have extend-expect to be present that contains the globals

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, as this library is extending expect() to have more matchers.

Copy link
Contributor

Choose a reason for hiding this comment

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

What I meant was there needs to be a file extend-expect.d.ts that defines all the global declaraitons.


declare namespace jest {
Copy link
Contributor

Choose a reason for hiding this comment

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

This is not going to work with import {toBeInTheDocument, toHaveClass} from '@testing-library/jest-dom' as per https://github.com/testing-library/jest-dom#usage

Copy link
Contributor Author

@weyert weyert Aug 20, 2019

Choose a reason for hiding this comment

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

I am not sure how to support this alternative way of using the library with TypeScript. Do we want to support the not typical usage of the library? Any tips how this could be resolved?

By exposing both ways extending the jest namespace and export as a typical type outside the namespace to allow covering this?

Copy link
Contributor

Choose a reason for hiding this comment

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

Please read https://github.com/DefinitelyTyped/DefinitelyTyped#how-do-i-write-definitions-for-packages-that-can-be-used-globally-and-as-a-module for details on how to write definitions that are available as module or global

interface Matchers<R> {
/**
* @deprecated
*/
toBeInTheDOM(container?: HTMLElement | SVGElement): R;
toBeInTheDocument(): R;
toBeVisible(): R;
toBeEmpty(): R;
toBeDisabled(): R;
toBeEnabled(): R;
toBeInvalid(): R;
toBeRequired(): R;
toBeValid(): R;
toContainElement(element: HTMLElement | SVGElement | null): R;
toContainHTML(htmlText: string): R;
toHaveAttribute(attr: string, value?: any): R;
toHaveClass(...classNames: string[]): R;
toHaveFocus(): R;
toHaveFormValues(expectedValues: { [name: string]: any }): R;
toHaveStyle(css: string): R;
toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean }): R;
toHaveValue(value?: string | string[] | number): R;
}
}
25 changes: 25 additions & 0 deletions types/testing-library__jest-dom/testing-library__jest-dom-tests.ts
@@ -0,0 +1,25 @@
import 'jest';
import '@testing-library/jest-dom';

declare const expect: jest.Expect;

const element = document.createElement('div');
expect(element).toBeInTheDOM();
expect(element).toBeInTheDocument();
expect(element).toBeVisible();
expect(element).toBeEmpty();
expect(element).toBeDisabled();
expect(element).toBeEnabled();
expect(element).toBeInvalid();
expect(element).toBeRequired();
expect(element).toBeValid();
expect(element).toContainElement(null);
expect(element).toContainHTML('<div>Test</div>');
expect(element).toHaveAttribute('id');
expect(element).toHaveClass('is-active');
expect(element).toHaveFocus();
expect(element).toHaveFormValues({ name: 'Name' });
expect(element).toHaveStyle('span { font-weight: bold; }');
expect(element).toHaveStyle('span { font-weight: bold; }');
expect(element).toHaveTextContent('Example');
expect(element).toHaveValue('Test');
21 changes: 21 additions & 0 deletions types/testing-library__jest-dom/tsconfig.json
@@ -0,0 +1,21 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": ["dom", "es6"],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"baseUrl": "../",
"typeRoots": ["../"],
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true
},
"paths": {
"@testing-library/jest-dom": [
"testing-library__jest-dom"
]
},
"files": ["index.d.ts", "testing-library__jest-dom-tests.ts"]
}
1 change: 1 addition & 0 deletions types/testing-library__jest-dom/tslint.json
@@ -0,0 +1 @@
{ "extends": "dtslint/dt.json" }