* feat: add getAllByTestId and queryAllByTestId queries
* Add test for getAllByTestId and queryAllByTestId
- Filter out intermediate components in getAllByTestId. testIDs may be passed down to child components and appearing multiple times in the render tree. Some React Native components render multiple anyways. <Text> is an example.
* Update TypeScript typings
* Fix flow types
* Update TS typings test
### Summary
Bumping Jest to latest, removed inline snapshot as there's a pending bug with trailing whitespaces inside of it being removed by IDEs (solution is to make them regular snapshots, but in this case the test was just plain unnecessary)
### Test plan
CI
<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->
### Summary
Users of `react-testing-library` use `rerender` wording instead of `update`. Let's make it easier for them by aliasing it.
See: https://testing-library.com/docs/react-testing-library/api#rerender
### Test plan
Added cases for JS tests and TS typings
### Summary
If I have a custom button like:
```js
<MyCustomButton handlePress={onPress} />
```
The following will not work:
```js
fireEvent(getByTestId('my-custom-button'), 'handlePress');
```
Because we are trying to call `onHandlePress`.
### Test plan
```
yarn test fireEvent
```
### Summary
Currently `render` and `fireEvent` are wrapped in `act` to support hooks. This pull request wraps the update call in `act` to support testing component updates (e.g. prop changes).
### Test plan
* I have added a test for update in `__tests__/act.test.js`.
* A useEffect hook should run again on `update` calls (if the hook dependency array is satisfied).
### Summary
Check for undefined/null values, in `getByText` nodes.
Fixes#135
### Test plan
Passing tests on repro repository https://github.com/wKovacs64/rntl-161-repro.
Have no idea how to create a unit test, to test this behavior.
cc @thymikee @wKovacs64
### Summary
Given a component that renders text by composing together literal text with an inline expression for a dynamic variable, React Native will render this as a `<Text>` element with multiple children. For example:
```js
const BananaCounter = ({ numBananas }) => (
<Text>There are {numBananas} bananas in the bunch</Text>
);
const { toJSON, debug } = render(<BananaCounter numBananas={3} />);
debug();
/*
<Text>
There are
3
bananas in the bunch
</Text>
*/
expect(toJSON()).toMatchInlineSnapshot(`
<Text>
There are
3
bananas in the bunch
</Text>
`);
```
This makes sense, as the component is a:
- literal string
- a dynamic evaluation
- literal string
Unfortunately, this means that writing a test that finds an element based on that dynamic evaluation fails when using `getByText`.
```js
const { getByText } = render(<BananaCounter numBananas={3} />);
expect(getByText('There are 3 bananas in the bunch')).toBeTruthy(); // Fails
```
This is because we compare the given test string directly against `children`. https://github.com/callstack/react-native-testing-library/blob/ce3bf28f308728672bc5502e120048821c60218b/src/helpers/getByAPI.js#L23-L24
This results in comparing `'There are 3 bananas in the bunch' === ['There are ' 3, ' bananas in the bunch']`, which of course will fail.
The solution is to join children and compare the joined result against the given text string.
### Test plan
A test for this new functionality is provided!
### Summary
There is a helper that exists in `react-testing-library` to query inputs by their `placeholder`. This PR adds that support.
You **could** achieve this by querying for a `placeholder` prop, or querying for react native `TextInput`s manually and then checking their props, but it felt cleaner to have this contained in the testing library itself. It will also allow you to bypass any other instances that may have a `placeholder` prop that aren't `TextInput`s.
If we don't want to expand the surface of the library further, I completely understand that and am fine with this being closed. Just seems like it may be useful and save some time for several scenarios =)
### Test plan
+ Render a `TextInput` with a `placeholder` prop
+ Query the test instance via `getByPlaceholder` for the input
+ Verify the test instance is found
<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->
### Summary
Existential type (`*`) is long deprecated, let's just use `any` for now.
### Test plan
Added some more Flow typings to `shallow.test.js` that were failing because of existential type.
<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->
### Summary
While upgrading the RN dev dep to 0.57.5 our test suite caught a bug, where `getAllBy*` methods would return more elements than expected. This is fixed by making sure we check the proper type of the parameter when we compare it directly to `node.type` (should be a function, but we allowed strings)
### Test plan
Updated snapshot (yay! RN fixed the display names of View and Text)
<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->
### Summary
Make `debug.deep` more usable by allowing it to print arbitrary JSON (and actually any) files. This proves handy when we want to debug async component which we want to snapshot after async operations:
```jsx
const { toJSON, getByName } = render(
<Button onPress={jest.fn} text="Press me" />
);
fireEvent.press(getByName('TouchableOpacity'));
await flushMicrotasksQueue();
debug.deep(toJSON());
```
### Test plan
added one
<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->
### Summary
This actually uncovered some bugs, like lack of `onDoublePress` (lol XD) and enabled us to have better snapshots for deep rendering.
### Test plan
no new tests
Remove bubbling events to the root element as in the most common use case we pass handler prop to the root element:
```jsx
// That's usually what we do in tests
const tree = render(<SomeElement onPress={mockedHandler} />);
// Unsupported use case
const tree = render(<TouchableOpacity onPress={mockHandler()}><Text>XD</Text></TouchableOpacity>)
```
Kacper Wiszczuk
