-
Notifications
You must be signed in to change notification settings - Fork 277
Allow for text to match children who are composed as array #132
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
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
eliperkins
commented
Mar 13, 2019
8c3f930
to
720420a
Compare
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.
720420a
to
0713975
Compare
thymikee
approved these changes
Mar 14, 2019
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yay!
Esemesek
approved these changes
Mar 16, 2019
@eliperkins I think we should also mention this behavior in the documentation. Can you also make changes there? |
Thanks y'all! 🎊 |
Thank you too ❤️ ❤️ ❤️ |
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:This makes sense, as the component is a:
Unfortunately, this means that writing a test that finds an element based on that dynamic evaluation fails when using
getByText
.This is because we compare the given test string directly against
children
.react-native-testing-library/src/helpers/getByAPI.js
Lines 23 to 24 in ce3bf28
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!