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

Add window to jest setup #28067

Closed
wants to merge 1 commit into from
Closed

Add window to jest setup #28067

wants to merge 1 commit into from

Conversation

timomeh
Copy link
Contributor

@timomeh timomeh commented Feb 14, 2020

Summary

window exists in the React Native runtime, but not inside the test environment. Many libraries use typeof window === 'undefined' to check if code is running in SSR. Because of the difference in the real environment and test environment, tests can behave different than the real app, which is an unwanted behavior.

Background

I'm using https://github.com/tannerlinsley/react-query in my React Native Project, which works really well. When writing tests, they wouldn't work: jest started and then seemingly did nothing. While debugging I noticed the render was stuck in an infinite loop. Then I noticed the following line inside react-query:

const isServer = typeof window === 'undefined'

I didn't know that the React Native runtime has a global window, and thought it's a bug inside react-query. But it does have a window, which is not defined inside the test environment.

The infinite loop was caused by react-query thinking it is running on the server, which doesn't fetch any data. If the react-query hook mounts, it re-executes because then it should be mounted inside the client. But isServer was still true. This repeats forever.

Changelog

[General] [Fixed] - Fix window not existing in jest setup

Test Plan

Are there tests to check if the test environment is setup correctly? 🤔

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Feb 14, 2020
@analysis-bot
Copy link

RNTester (Android/hermes/arm64-v8a): 3289088 bytes
RNTester (Android/hermes/armeabi-v7a): 3129344 bytes
RNTester (Android/hermes/x86): 3461120 bytes
RNTester (Android/hermes/x86_64): 3424256 bytes
RNTester (Android/jsc/arm64-v8a): 4446208 bytes
RNTester (Android/jsc/armeabi-v7a): 4268032 bytes
RNTester (Android/jsc/x86): 4358144 bytes
RNTester (Android/jsc/x86_64): 4644864 bytes

@analysis-bot
Copy link

RNTester.app (iOS): 10657792 bytes

@timomeh timomeh changed the title Window in jest setup Add window to jest setup Feb 14, 2020
@charlesbdudley
Copy link
Contributor

Thanks for this @timomeh, do you mind rebasing to get these tests to pass and we'll import for review?

@charlesbdudley charlesbdudley self-assigned this Aug 12, 2021
`window` exists in the React Native runtime, but not inside the test
environment. Many libraries use `typeof window === 'undefined'` to
check if code is running in SSR. Because of the difference in the real
environment and test environment, tests can behave different than the
real app, which is an unwanted behavior.
@analysis-bot
Copy link

analysis-bot commented Aug 12, 2021

Platform Engine Arch Size (bytes) Diff
ios - universal n/a --

Base commit: f536f82

@timomeh
Copy link
Contributor Author

timomeh commented Aug 12, 2021

@charlesbdudley Done! The test_ios_unit_hermes check is failing, but it also fails on the main branch.

@analysis-bot
Copy link

Platform Engine Arch Size (bytes) Diff
android hermes arm64-v8a 9,241,399 +0
android hermes armeabi-v7a 8,753,218 +0
android hermes x86 9,684,388 +0
android hermes x86_64 9,652,601 +0
android jsc arm64-v8a 10,877,532 +0
android jsc armeabi-v7a 9,780,623 +0
android jsc x86 10,915,934 +0
android jsc x86_64 11,525,647 +0

Base commit: 3560753

@facebook-github-bot
Copy link
Contributor

@charlesbdudley has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

@facebook-github-bot
Copy link
Contributor

@charlesbdudley merged this pull request in bc1c533.

@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Aug 24, 2021
@timomeh timomeh deleted the window-in-jest-setup branch August 24, 2021 16:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants