Skip to content

Commit b6569a6

Browse files
EsemesekEsemesek
authored
feat Add Typescript types (#18)
1 parent 0ce1d7e commit b6569a6

File tree

5 files changed

+184
-1
lines changed

5 files changed

+184
-1
lines changed

‎.circleci/config.yml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,13 @@ jobs:
3333
- run: |
3434
yarn lint
3535
yarn flow-check
36+
typescript:
37+
<<: *defaults
38+
steps:
39+
- attach_workspace:
40+
at: ~/react-native-testing-library
41+
- run: |
42+
yarn typescript-check
3643
tests:
3744
<<: *defaults
3845
steps:
@@ -51,6 +58,9 @@ workflows:
5158
- lint-and-flow:
5259
requires:
5360
- install-dependencies
61+
- typescript:
62+
requires:
63+
- install-dependencies
5464
- tests:
5565
requires:
5666
- install-dependencies

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.2.2",
44
"description": "Simple React Native testing utilities helping you write better tests with less effort",
55
"main": "src/index.js",
6+
"typings": "./typings/index.d.ts",
67
"repository": "[email protected]:callstack/react-native-testing-library.git",
78
"author": "Michał Pierzchała <[email protected]>",
89
"license": "MIT",
@@ -11,6 +12,8 @@
1112
"@babel/core": "^7.1.2",
1213
"@babel/runtime": "^7.1.2",
1314
"@callstack/eslint-config": "^2.0.0",
15+
"@types/react": "^16.4.15",
16+
"@types/react-test-renderer": "^16.0.3",
1417
"babel-core": "7.0.0-bridge.0",
1518
"babel-jest": "^23.6.0",
1619
"eslint": "^5.6.1",
@@ -19,7 +22,8 @@
1922
"metro-react-native-babel-preset": "^0.48.0",
2023
"pretty-format": "^23.6.0",
2124
"react": "^16.5.2",
22-
"react-test-renderer": "^16.5.2"
25+
"react-test-renderer": "^16.5.2",
26+
"typescript": "^3.1.1"
2327
},
2428
"peerDependencies": {
2529
"pretty-format": ">=20.0.0",
@@ -32,6 +36,7 @@
3236
"scripts": {
3337
"test": "jest",
3438
"flow-check": "flow check",
39+
"typescript-check": "tsc --noEmit --skipLibCheck --jsx react ./typings/__tests__/*",
3540
"lint": "eslint src --cache"
3641
}
3742
}

‎typings/__tests__/index.test.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import * as React from 'react';
2+
import { ReactTestInstance } from 'react-test-renderer';
3+
import { render, fireEvent, shallow, flushMicrotasksQueue, debug } from '../..';
4+
5+
const View = props => props.children;
6+
const Text = props => props.children;
7+
8+
const TestComponent = () => (
9+
<View>
10+
<Text>Test component</Text>
11+
</View>
12+
);
13+
14+
const tree = render(<TestComponent />);
15+
16+
// getByAPI tests
17+
const getByNameString: ReactTestInstance = tree.getByName('View');
18+
const getByNameContructor: ReactTestInstance = tree.getByName(View);
19+
const getByTextString: ReactTestInstance = tree.getByText('<View />');
20+
const getByTextRegExp: ReactTestInstance = tree.getByText(/View/g);
21+
const getByProps: ReactTestInstance = tree.getByProps({ value: 2 });
22+
const getByTestId: ReactTestInstance = tree.getByTestId('test-id');
23+
const getAllByNameString: Array<ReactTestInstance> = tree.getAllByName('View');
24+
const getAllByNameConstructor: Array<ReactTestInstance> = tree.getAllByName(
25+
View
26+
);
27+
const getAllByTextString: Array<ReactTestInstance> = tree.getAllByText(
28+
'<View />'
29+
);
30+
const getAllByTextRegExp: Array<ReactTestInstance> = tree.getAllByText(/Text/g);
31+
const getAllByProps: Array<ReactTestInstance> = tree.getAllByProps({
32+
value: 2,
33+
});
34+
35+
// queuryByAPI tests
36+
const queryByNameString: ReactTestInstance | null = tree.queryByName('View');
37+
const queryByNameConstructor: ReactTestInstance | null = tree.queryByName(View);
38+
const queryByTextString: ReactTestInstance | null = tree.queryByText(
39+
'<View />'
40+
);
41+
const queryByTextRegExp: ReactTestInstance | null = tree.queryByText(/View/g);
42+
const queryByProps: ReactTestInstance | null = tree.queryByProps({ value: 2 });
43+
const queryByTestId: ReactTestInstance | null = tree.queryByTestId('test-id');
44+
const queryAllByNameString: Array<ReactTestInstance> = tree.getAllByName(
45+
'View'
46+
);
47+
const queryAllByNameConstructor: Array<ReactTestInstance> = tree.getAllByName(
48+
View
49+
);
50+
const queryAllByTextString: Array<ReactTestInstance> = tree.queryAllByText(
51+
'View'
52+
);
53+
const queryAllByTextRegExp: Array<ReactTestInstance> = tree.queryAllByText(
54+
/View/g
55+
);
56+
const queryAllByProps: Array<ReactTestInstance> = tree.getAllByProps({
57+
value: 2,
58+
});
59+
60+
tree.update(<View />);
61+
tree.unmount();
62+
63+
// fireEvent API tests
64+
fireEvent(getByNameString, 'press');
65+
fireEvent(getByNameString, 'press', 'data');
66+
fireEvent.press(getByNameString);
67+
fireEvent.doublePress(getByNameString);
68+
fireEvent.changeText(getByNameString, 'string');
69+
fireEvent.scroll(getByNameString, 'eventData');
70+
71+
// shallow API
72+
const shallowTree: { output: React.ReactElement<any> } = shallow(
73+
<TestComponent />
74+
);
75+
76+
const waitForFlush: Promise<any> = flushMicrotasksQueue();
77+
78+
debug(<TestComponent />);
79+
debug(getByNameString);

‎typings/index.d.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import * as React from 'react';
2+
import { ReactTestInstance } from 'react-test-renderer';
3+
4+
export interface GetByAPI {
5+
getByName: (name: React.ReactType) => ReactTestInstance;
6+
getByText: (text: string | RegExp) => ReactTestInstance;
7+
getByProps: (props: Record<string, any>) => ReactTestInstance;
8+
getByTestId: (testID: string) => ReactTestInstance;
9+
getAllByName: (name: React.ReactType) => Array<ReactTestInstance>;
10+
getAllByText: (text: string | RegExp) => Array<ReactTestInstance>;
11+
getAllByProps: (props: Record<string, any>) => Array<ReactTestInstance>;
12+
}
13+
14+
export interface QueryByAPI {
15+
queryByName: (name: React.ReactType) => ReactTestInstance | null;
16+
queryByText: (name: string | RegExp) => ReactTestInstance | null;
17+
queryByProps: (props: Record<string, any>) => ReactTestInstance | null;
18+
queryByTestId: (testID: string) => ReactTestInstance | null;
19+
queryAllByName: (name: React.ReactType) => Array<ReactTestInstance> | [];
20+
queryAllByText: (text: string | RegExp) => Array<ReactTestInstance> | [];
21+
queryAllByProps: (
22+
props: Record<string, any>
23+
) => Array<ReactTestInstance> | [];
24+
}
25+
26+
export interface RenderOptions {
27+
createNodeMock: (element: React.ReactElement<any>) => any;
28+
}
29+
30+
export interface RenderAPI extends GetByAPI, QueryByAPI {
31+
update(nextElement: React.ReactElement<any>): void;
32+
unmount(nextElement?: React.ReactElement<any>): void;
33+
}
34+
35+
export type FireEventFunction = (
36+
element: ReactTestInstance,
37+
eventName: string,
38+
data?: any
39+
) => any;
40+
41+
export type FireEventAPI = FireEventFunction & {
42+
press: (element: ReactTestInstance) => any;
43+
doublePress: (element: ReactTestInstance) => any;
44+
changeText: (element: ReactTestInstance, data?: any) => any;
45+
scroll: (element: ReactTestInstance, data?: any) => any;
46+
};
47+
48+
export declare const render: (
49+
component: React.ReactElement<any>,
50+
options?: RenderOptions
51+
) => RenderAPI;
52+
export declare const shallow: <P = {}>(
53+
instance: ReactTestInstance | React.ReactElement<P>
54+
) => { output: React.ReactElement<P> };
55+
export declare const flushMicrotasksQueue: () => Promise<any>;
56+
export declare const debug: (
57+
instance: ReactTestInstance | React.ReactElement<any>
58+
) => void;
59+
export declare const fireEvent: FireEventAPI;

‎yarn.lock‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -662,6 +662,26 @@
662662
eslint-plugin-react "^7.5.1"
663663
prettier "^1.14.2"
664664

665+
"@types/prop-types@*":
666+
version "15.5.6"
667+
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.6.tgz#9c03d3fed70a8d517c191b7734da2879b50ca26c"
668+
integrity sha512-ZBFR7TROLVzCkswA3Fmqq+IIJt62/T7aY/Dmz+QkU7CaW2QFqAitCE8Ups7IzmGhcN1YWMBT4Qcoc07jU9hOJQ==
669+
670+
"@types/react-test-renderer@^16.0.3":
671+
version "16.0.3"
672+
resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.0.3.tgz#cce5c983d66cc5c3582e7c2f44b274ab635a8acc"
673+
integrity sha512-NWOAxVQeJxpXuNKgw83Hah0nquiw1nUexM9qY/Hk3a+XhZwgMtaa6GLA9E1TKMT75Odb3/KE/jiBO4enTuEJjQ==
674+
dependencies:
675+
"@types/react" "*"
676+
677+
"@types/react@*", "@types/react@^16.4.15":
678+
version "16.4.15"
679+
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.15.tgz#1f24f1d03b1fc682d92f8485be99d59bf7981191"
680+
integrity sha512-EFQyVZhZCrRjwYDVziTEUGri/ygArIi/ES+JAI0j+3FR0LZ0uRfq2Ed7YnZ1CCn9CM3malSWwTKw5Jo0gVV82A==
681+
dependencies:
682+
"@types/prop-types" "*"
683+
csstype "^2.2.0"
684+
665685
abab@^2.0.0:
666686
version "2.0.0"
667687
resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.0.tgz#aba0ab4c5eee2d4c79d3487d85450fb2376ebb0f"
@@ -1443,6 +1463,11 @@ cssstyle@^1.0.0:
14431463
dependencies:
14441464
cssom "0.3.x"
14451465

1466+
csstype@^2.2.0:
1467+
version "2.5.7"
1468+
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.5.7.tgz#bf9235d5872141eccfb2d16d82993c6b149179ff"
1469+
integrity sha512-Nt5VDyOTIIV4/nRFswoCKps1R5CD1hkiyjBE9/thNaNZILLEviVw9yWQw15+O+CpNjQKB/uvdcxFFOrSflY3Yw==
1470+
14461471
damerau-levenshtein@^1.0.4:
14471472
version "1.0.4"
14481473
resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
@@ -4941,6 +4966,11 @@ type-check@~0.3.2:
49414966
dependencies:
49424967
prelude-ls "~1.1.2"
49434968

4969+
typescript@^3.1.1:
4970+
version "3.1.1"
4971+
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.1.1.tgz#3362ba9dd1e482ebb2355b02dfe8bcd19a2c7c96"
4972+
integrity sha512-Veu0w4dTc/9wlWNf2jeRInNodKlcdLgemvPsrNpfu5Pq39sgfFjvIIgTsvUHCoLBnMhPoUA+tFxsXjU6VexVRQ==
4973+
49444974
uglify-js@^3.1.4:
49454975
version "3.4.9"
49464976
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.9.tgz#af02f180c1207d76432e473ed24a28f4a782bae3"

0 commit comments

Comments
 (0)