Skip to content

Commit 414f870

Browse files
mdjastrzebskithymikee
mdjastrzebski
and
thymikee
authored
feat: Support for @testing-library/jest-native (#310)
* Added @testing-library/jest-native to devDependencies * Tests for jest-native matchers * Added @testing-library/jest-native install info * Update README.md * Update GettingStarted.md * feat: add `findBy*` queries (#304) * Basic async findBy queries * Refactored findBy queries to be built with makeFindQuery * findBy queries for A11y selectors * Custom findByTestId implementation that avoids current getByTestId issues * Fixed prettier issue * Updates Queries.md with findBy queries * Trying to fix test timeout error appearing only on CI * Code review changes * Added typescript types & tests * prettier did reformat some code arround * Removed export of GetByAPI, QueryByAPI and FindByAPI interfaces in TS * Reversed prettier run on typings * Added overlapping pieces with `within` operator * Small cleanup * Update website/docs/Queries.md * Moved async/await tests to the end of test methods Co-authored-by: Michał Pierzchała <thymikee@gmail.com> * chore: bump eslint config to latest (#308) * chore: bump eslint config to latest * lint fix * lint pass * use roles directly * Trying to fix CI build * Added $FlowFixMe for missing flow expect extensions * Small doc fixes * Clarified failing toHaveProps matcher tests * Moved lint ignore for color literals to .eslintrc * Updated toHaveProp tests to avoid strange `Button` behavior * Updated yarn.lock * Update README.md * Update website/docs/GettingStarted.md Co-authored-by: Michał Pierzchała <thymikee@gmail.com>
1 parent c482f6a commit 414f870

File tree

6 files changed

+202
-2
lines changed

6 files changed

+202
-2
lines changed

‎.eslintrc

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
2,
1111
{ "ignore": ["^@theme", "^@docusaurus", "^@generated"] }
1212
],
13-
"react-native-a11y/has-valid-accessibility-ignores-invert-colors": 0
13+
"react-native-a11y/has-valid-accessibility-ignores-invert-colors": 0,
14+
"react-native/no-color-literals": "off"
1415
}
1516
}

‎README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,46 @@ You can find the source of `QuestionsBoard` component and this example [here](ht
6464

6565
Open a Terminal in your project's folder and run:
6666

67+
#### Using `yarn`
68+
6769
```sh
6870
yarn add --dev react-native-testing-library
6971
```
7072

73+
#### Using `npm`
74+
75+
```sh
76+
npm install --save-dev react-native-testing-library
77+
```
78+
7179
This library has a peerDependencies listing for `react-test-renderer` and, of course, `react`. Make sure to install them too!
7280

81+
### Additional Jest matchers
82+
83+
In order to use addtional React Native-specific jest matchers from [@testing-library/jest-native](https://github.com/testing-library/jest-native) package add it to your project:
84+
85+
#### Using `yarn`
86+
87+
```sh
88+
yarn add --dev @testing-library/jest-native
89+
```
90+
91+
#### Using `npm`
92+
93+
```sh
94+
npm install --save-dev @testing-library/jest-native
95+
```
96+
97+
Then automatically add it to your jest tests by using `setupFilesAfterEnv` option in the `jest.config.js` file:
98+
99+
```js
100+
module.exports = {
101+
setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
102+
};
103+
```
104+
105+
### Flow
106+
73107
Note for [Flow](https://flow.org) users – you'll also need to install typings for `react-test-renderer`:
74108

75109
```sh

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"@babel/core": "^7.9.0",
2424
"@callstack/eslint-config": "^10.0.0",
2525
"@release-it/conventional-changelog": "^1.1.0",
26+
"@testing-library/jest-native": "~3.1.0",
2627
"@types/react": "^16.9.34",
2728
"@types/react-native": "^0.62.2",
2829
"@types/react-test-renderer": "^16.9.2",

‎src/__tests__/jest-native.test.js

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
// @flow
2+
import React from 'react';
3+
import { StyleSheet, View, Button, Text, TextInput } from 'react-native';
4+
import { render } from '..';
5+
import '@testing-library/jest-native/extend-expect';
6+
7+
const style = StyleSheet.create({
8+
style1: {
9+
color: 'red',
10+
backgroundColor: 'green',
11+
},
12+
});
13+
14+
test('jest-native matchers work correctly', () => {
15+
const { getByText, getByA11yHint } = render(
16+
<View>
17+
<Button title="Enabled Button" onPress={jest.fn()} />
18+
<Button title="Disabled Button" disabled={true} onPress={jest.fn()} />
19+
<Text accessibilityHint="Empty Text" style={style.style1} />
20+
<Text accessibilityHint="Not Empty Text">Not empty</Text>
21+
<View accessibilityHint="Empty View" />
22+
<View accessibilityHint="Not Empty View">
23+
<Text />
24+
</View>
25+
<View accessibilityHint="Container View">
26+
<View accessibilityHint="First-Level Child">
27+
<Text>Second-Level Child</Text>
28+
</View>
29+
</View>
30+
<TextInput
31+
accessibilityHint="Text Input"
32+
allowFontScaling={false}
33+
secureTextEntry={true}
34+
defaultValue="111"
35+
/>
36+
</View>
37+
);
38+
39+
// $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
40+
expect(getByText('Enabled Button')).toBeEnabled();
41+
42+
// $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
43+
expect(getByText('Disabled Button')).not.toBeEnabled();
44+
45+
expect(getByText('Disabled Button')).toBeDisabled();
46+
expect(getByText('Enabled Button')).not.toBeDisabled();
47+
48+
expect(getByA11yHint('Empty Text')).toBeEmpty();
49+
expect(getByA11yHint('Empty View')).toBeEmpty();
50+
expect(getByA11yHint('Not Empty Text')).not.toBeEmpty();
51+
expect(getByA11yHint('Not Empty View')).not.toBeEmpty();
52+
53+
// $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
54+
expect(getByA11yHint('Container View')).toContainElement(
55+
getByA11yHint('First-Level Child')
56+
);
57+
// $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
58+
expect(getByA11yHint('Container View')).toContainElement(
59+
getByText('Second-Level Child')
60+
);
61+
// $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
62+
expect(getByA11yHint('Container View')).not.toContainElement(
63+
getByText('Enabled Button')
64+
);
65+
66+
expect(getByA11yHint('Not Empty Text')).toHaveTextContent('Not empty');
67+
// $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
68+
expect(getByA11yHint('Not Empty Text')).toHaveTextContent(/Not empty/);
69+
expect(getByA11yHint('Not Empty Text')).not.toHaveTextContent('Is empty');
70+
71+
expect(getByA11yHint('Empty Text')).toHaveStyle({ color: 'red' });
72+
expect(getByA11yHint('Empty Text')).toHaveStyle({
73+
color: 'red',
74+
backgroundColor: 'green',
75+
});
76+
expect(getByA11yHint('Empty Text')).not.toHaveStyle({ color: 'green' });
77+
expect(getByA11yHint('Empty Text')).not.toHaveStyle({
78+
color: 'green',
79+
backgroundColor: 'green',
80+
});
81+
82+
const textInput = getByA11yHint('Text Input');
83+
expect(textInput).toBeTruthy();
84+
expect(textInput).toHaveProp('allowFontScaling');
85+
expect(textInput).toHaveProp('allowFontScaling', false);
86+
expect(textInput).toHaveProp('secureTextEntry');
87+
expect(textInput).toHaveProp('secureTextEntry', true);
88+
expect(textInput).toHaveProp('defaultValue');
89+
expect(textInput).toHaveProp('defaultValue', '111');
90+
});

‎website/docs/GettingStarted.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,42 @@ You can find the source of `QuestionsBoard` component and this example [here](ht
5050

5151
Open a Terminal in your project's folder and run:
5252

53+
#### Using `yarn`
54+
5355
```sh
5456
yarn add --dev react-native-testing-library
5557
```
5658

59+
#### Using `npm`
60+
61+
```sh
62+
npm install --save-dev react-native-testing-library
63+
```
64+
5765
This library has a peerDependencies listing for `react-test-renderer` and, of course, `react`. Make sure to install them too!
5866

5967
As you may have noticed, it's not tied to React Native at all – you can safely use it in your React components if you feel like not interacting directly with DOM.
68+
69+
### Additional Jest matchers
70+
71+
In order to use addtional React Native-specific jest matchers from [@testing-library/jest-native](https://github.com/testing-library/jest-native) package add it to your project:
72+
73+
#### Using `yarn`
74+
75+
```sh
76+
yarn add --dev @testing-library/jest-native
77+
```
78+
79+
#### Using `npm`
80+
81+
```sh
82+
npm install --save-dev @testing-library/jest-native
83+
```
84+
85+
Then automatically add it to your jest tests by using `setupFilesAfterEnv` option in the `jest.config.js` file:
86+
87+
```js
88+
module.exports = {
89+
setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
90+
};
91+
```

‎yarn.lock

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1311,6 +1311,18 @@
13111311
dependencies:
13121312
defer-to-connect "^2.0.0"
13131313

1314+
"@testing-library/jest-native@~3.1.0":
1315+
version "3.1.0"
1316+
resolved "https://registry.yarnpkg.com/@testing-library/jest-native/-/jest-native-3.1.0.tgz#414c834dfb524ca82b86509d5479e365d4d5bbec"
1317+
integrity sha512-MZdsTsD6xrP5V0FTz2gVPG00ZMoKn4WniRitUH40zZTQ0DfMa5CVDpkAd5ed6qX1coDwS8vSCZS/JGMIDYjRQQ==
1318+
dependencies:
1319+
chalk "^2.4.1"
1320+
jest-diff "^24.0.0"
1321+
jest-matcher-utils "^24.0.0"
1322+
pretty-format "^24.0.0"
1323+
ramda "^0.26.1"
1324+
redent "^2.0.0"
1325+
13141326
"@types/babel__core@^7.1.7":
13151327
version "7.1.7"
13161328
resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.7.tgz#1dacad8840364a57c98d0dd4855c6dd3752c6b89"
@@ -3152,6 +3164,11 @@ detect-repo-changelog@1.0.1:
31523164
lodash.find "^4.6.0"
31533165
pify "^2.3.0"
31543166

3167+
diff-sequences@^24.9.0:
3168+
version "24.9.0"
3169+
resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
3170+
integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
3171+
31553172
diff-sequences@^26.0.0:
31563173
version "26.0.0"
31573174
resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.0.0.tgz#0760059a5c287637b842bd7085311db7060e88a6"
@@ -5007,6 +5024,16 @@ jest-config@^26.0.1:
50075024
micromatch "^4.0.2"
50085025
pretty-format "^26.0.1"
50095026

5027+
jest-diff@^24.0.0, jest-diff@^24.9.0:
5028+
version "24.9.0"
5029+
resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
5030+
integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
5031+
dependencies:
5032+
chalk "^2.0.1"
5033+
diff-sequences "^24.9.0"
5034+
jest-get-type "^24.9.0"
5035+
pretty-format "^24.9.0"
5036+
50105037
jest-diff@^26.0.1:
50115038
version "26.0.1"
50125039
resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.0.1.tgz#c44ab3cdd5977d466de69c46929e0e57f89aa1de"
@@ -5138,6 +5165,16 @@ jest-leak-detector@^26.0.1:
51385165
jest-get-type "^26.0.0"
51395166
pretty-format "^26.0.1"
51405167

5168+
jest-matcher-utils@^24.0.0:
5169+
version "24.9.0"
5170+
resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
5171+
integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==
5172+
dependencies:
5173+
chalk "^2.0.1"
5174+
jest-diff "^24.9.0"
5175+
jest-get-type "^24.9.0"
5176+
pretty-format "^24.9.0"
5177+
51415178
jest-matcher-utils@^26.0.1:
51425179
version "26.0.1"
51435180
resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-26.0.1.tgz#12e1fc386fe4f14678f4cc8dbd5ba75a58092911"
@@ -7161,7 +7198,7 @@ prettier@^2.0.4:
71617198
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
71627199
integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
71637200

7164-
pretty-format@^24.7.0, pretty-format@^24.9.0:
7201+
pretty-format@^24.0.0, pretty-format@^24.7.0, pretty-format@^24.9.0:
71657202
version "24.9.0"
71667203
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
71677204
integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
@@ -7297,6 +7334,11 @@ quick-lru@^5.0.0:
72977334
resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.0.tgz#1602f339bde554c4dace47880227ec9c2869f2e8"
72987335
integrity sha512-WjAKQ9ORzvqjLijJXiXWqc3Gcs1ivoxCj6KJmEjoWBE6OtHwuaDLSAUqGHALUiid7A1KqGqsSHZs8prxF5xxAQ==
72997336

7337+
ramda@^0.26.1:
7338+
version "0.26.1"
7339+
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
7340+
integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
7341+
73007342
range-parser@~1.2.1:
73017343
version "1.2.1"
73027344
resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"

0 commit comments

Comments
 (0)