improvement: Allow for text to match children who are composed as array (#132)

### 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!
This commit is contained in:
Eli Perkins
2019-03-18 11:25:13 -04:00
committed by Kacper Wiszczuk
parent 30fcce5508
commit 97ab842567
3 changed files with 48 additions and 6 deletions
+2
View File
@@ -50,6 +50,8 @@ type ReactTestInstance = {
A method returning a `ReactTestInstance` with matching text – may be a string or regular expression. Throws when no matches.
This method will join `<Text>` siblings to find matches, similarly to [how React Native handles these components](https://facebook.github.io/react-native/docs/text#containers). This will allow for querying for strings that will be visually rendered together, but may be semantically separate React components.
### `getAllByText: (text: string | RegExp)`
A method returning an array of `ReactTestInstance`s with matching text – may be a string or regular expression.