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

Allow for text to match children who are composed as array #132

Merged
merged 4 commits into from Mar 18, 2019

Conversation

Projects
None yet
3 participants
@eliperkins
Copy link
Contributor

commented Mar 13, 2019

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:

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.

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.

? text === node.props.children
: text.test(node.props.children))

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!

Show resolved Hide resolved src/helpers/getByAPI.js Outdated

@eliperkins eliperkins force-pushed the eliperkins:text-as-array branch from 8c3f930 to 720420a Mar 13, 2019

Allow for text components with multiple children to be queried for
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.

@eliperkins eliperkins force-pushed the eliperkins:text-as-array branch from 720420a to 0713975 Mar 13, 2019

@thymikee
Copy link
Member

left a comment

Yay!

Show resolved Hide resolved src/helpers/getByAPI.js Outdated

@thymikee thymikee requested a review from Esemesek Mar 14, 2019

@Esemesek

This comment has been minimized.

Copy link
Member

commented Mar 16, 2019

@eliperkins I think we should also mention this behavior in the documentation. Can you also make changes there?

@Esemesek Esemesek merged commit 97ab842 into callstack:master Mar 18, 2019

4 checks passed

ci/circleci: install-dependencies Your tests passed on CircleCI!
Details
ci/circleci: lint-and-flow Your tests passed on CircleCI!
Details
ci/circleci: tests Your tests passed on CircleCI!
Details
ci/circleci: typescript Your tests passed on CircleCI!
Details

@eliperkins eliperkins deleted the eliperkins:text-as-array branch Mar 18, 2019

@eliperkins

This comment has been minimized.

Copy link
Contributor Author

commented Mar 18, 2019

Thanks y'all! 🎊

@Esemesek

This comment has been minimized.

Copy link
Member

commented Mar 18, 2019

Thank you too ❤️ ❤️ ❤️

@thymikee

This comment has been minimized.

Copy link
Member

commented Mar 18, 2019

Available in 1.6.1, thank you :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.