Summary:
This change aligns requestAnimationFrame implementation used in Jest environment with web standard, and with the implementation that runs in the application environment.
As per specification https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#parameters – requestAnimationFrame callback gets a single parameter, which represents the current frame timestamp. The current polyfill maps requestAnimationFrame directly to setTimeout which makes the callback execute without any parameters.
## Changelog
[General] [Fixed] - Jest mocked requestAnimationFrame callbacks now receive a timestamp parameter
Pull Request resolved: https://github.com/facebook/react-native/pull/35919
Test Plan:
1. execute jest test suite to make sure nothing breaks
2. add the below code to one of the tests:
```
jest.useFakeTimers();
requestAnimationFrame((timestamp) => console.log("rAF", timestamp));
jest.runOnlyPendingTimers();
jest.useRealTimers();
```
this code will print `undefined` before and numer `0` representing the mocked frame time after this change.
Reviewed By: jacdebug
Differential Revision: D42676544
Pulled By: robhogan
fbshipit-source-id: 363dc506ccc4bd034408fbb35ad3151875a8d309
Summary:
Changelog:
[General][Changed] - renamed react-native/polyfills -> react-native/js-polyfills and align with other packages versions (0.72.0) as a part of migration to monorepo
Reviewed By: motiz88
Differential Revision: D41553157
fbshipit-source-id: eef70c8e7639080acdeb6716d1a915760a85458a
Summary:
This makes it so that React Native unit tests will fail if code unexpectedly outputs a warning or error (which would show as a redbox error).
This logic split out from the normal `jest/setup.js` which is included by the jest-preset, to only effect our tests instead of existing RN Jest users.
Changelog:
[Internal][Changed] - Fail tests on `console.error()` or `console.warn()`
Reviewed By: huntie
Differential Revision: D41564032
fbshipit-source-id: 3cc7d3a8433fcb75f654669b9c350dea2da937a8
Summary:
This PR is the follow up to the conversation started here by SimenB: https://github.com/react-native-community/discussions-and-proposals/issues/509
Basically, we want to move RN to use its own custom environment so that we can tweak it going forward - this PR in fact only sets up the groundwork for that; robhogan mentioned that with this in place, Meta engineers can
> iterate on it (with jest-environment-node as a starting point) against our internal product tests
This is also connected to Rob's work to bring Jest 29 into the codebase https://github.com/facebook/react-native/pull/34724 and my "mirror" PR to bring template in main up to the same version (https://github.com/facebook/react-native/pull/34972)
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[General] [Changed] - move Jest config to use a custom react-native Jest env
Pull Request resolved: https://github.com/facebook/react-native/pull/34971
Test Plan: Tested that `yarn test` in main works fine after the changes; CI and Meta's internal CI will also serve the purpose of verifying that it works (but there's no reason not to since it's still pretty much just relying on `node`).
Reviewed By: huntie
Differential Revision: D40379760
Pulled By: robhogan
fbshipit-source-id: 2c6d0bc86d337fda9befce0799bda2f56cc4466c
Summary:
`getSize` should resolve with an array of `[width, height]` but this mock resolves with `{ width, height }`.
It should be `ReadOnlyArray<number>` instead of `{width: number, height: number}`
The native image loader call is [here](https://github.com/facebook/react-native/blob/main/Libraries/Image/NativeImageLoaderIOS.js#L18):
```js
+getSize: (uri: string) => Promise<$ReadOnlyArray<number>>;
```
but in the [jest setup file](https://github.com/facebook/react-native/blob/main/jest/setup.js):
```js
getSize: jest.fn(url => Promise.resolve({width: 320, height: 240})),
```
My tests were failing on `Image.getSize()` - `TypeError: Invalid attempt to destructure non-iterable instance.`
I managed to trace this down to this object being returned by the Jest mock - looks like it's returning a size object instead of a dimensions array.
## Workaround
If you are hitting this issue, you can work around this mock by using:
```js
ReactNative.NativeModules.ImageLoader.getSize = jest.fn((_) => Promise.resolve([320, 240]));
```
## Changelog
[JavaScript] [Changed]: Changed the mocked return value of `ImageLoader.getSize` to be `[320, 240]` instead of `{ width: 320, height: 240 }`
Pull Request resolved: https://github.com/facebook/react-native/pull/34653
Test Plan: TBD? I think a test with `Image.getSize(path)` will cover it. That's where I hit the error with the ios-specific imageLoader's getSize method.
Reviewed By: robhogan
Differential Revision: D39413522
Pulled By: NickGerleman
fbshipit-source-id: 7f18d7acde0cf94da0b4aec8fe2d0cad3fb0cc55
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/34659
We've used this Promise polyfill in Jest setup since at least 2015 ([`3ff3987`](3ff39870ce)), when native Promise implementations were either non-existent or new and unstable. We no longer need it.
It causes issues with "modern" timers in Jest, as documented in:
- https://github.com/facebook/react-native/issues/29303
- https://github.com/facebook/jest/issues/10221
It can also obscure real issues due to its default silent handling of uncaught rejections, eg: D39418412.
Changelog:
[General][Changed] - Don't polyfill Promise in Jest setup
Reviewed By: huntie
Differential Revision: D39417597
fbshipit-source-id: d12433ed66c06a402632c2e1d525aad112ef9b0c
Summary:
The removeEventListener method has been removed from AccessibilityInfo and Linking in this PR: https://github.com/facebook/react-native/issues/33580, so I believe we can remove it from the mocks.
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[Internal] [Removed] - Remove removeEventListener from AccessibilityInfo and Linking mocks
Pull Request resolved: https://github.com/facebook/react-native/pull/34260
Test Plan: I executed jest and everything is still green.
Reviewed By: dmitryrykun
Differential Revision: D38198653
Pulled By: GijsWeterings
fbshipit-source-id: 72d10ca54cd505d7c76e7531c9df718b1a9b9ed1
Summary:
Changelog:
[Internal] Rename AccessibilityInfo.sendAccessibilityEvent_unstable to sendAccessibilityEvent
In Fabric, we want people to use `AccessibilityInfo.sendAccessibilityEvent` instead of `UIManager.sendAccessibilityEvent` for Android. The API is not unstable. There is a test in [AccessibilityExample.js](c940eb0c49/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js (L959)) in RNTester to confirm that it works.
A search for [`AccessibilityInfo.sendAccessibilityEvent_unstable` in Github](https://github.com/search?q=AccessibilityInfo.sendAccessibilityEvent_unstable&type=Code) shows that it's not being used yet, which makes sense because it's an Fabric API. Therefore it's safe to rename it.
Reviewed By: sammy-SC
Differential Revision: D37901006
fbshipit-source-id: 73f35b09ca8f9337f4d66a431f0a3f815da38249
Summary:
Changelog:
[Internal][Changed] - Remove babel plugins from jest preprocessor which are part of preset metro-react-native-babel-preset
Transformer metro-react-native-babel-transformer has preset metro-react-native-babel-preset which has necessary plugins to transpile the source. So we don’t need to pass it again in the preprocessor.
As part of the change, updated one test to use strict mode since metro-react-native-babel-preset has strictMode is set to false.
Reviewed By: motiz88
Differential Revision: D34868961
fbshipit-source-id: 71678f1ee6f1b5ebf9a0c6fd2d6444a61d7583ac
Summary:
Changelog:
[Breaking][General] Remove jest/preprocessor from the react-native package
Using `react-native/jest/preprocessor` outside of the React Native repo has been deprecated since D34820086 (c1e9aa9a27). Here, we make this file private and stop publishing it to npm.
The supported method of using Jest in React Native projects is using the [Jest preset](https://jestjs.io/docs/tutorial-react-native) shipped as part of the `react-native` package.
NOTE: We could probably make some of the other files under `jest/` private as well, but we should go through a separate deprecation cycle with those, in case they are also being used externally by some projects. I'm leaving that for future followup at the moment.
Reviewed By: GijsWeterings
Differential Revision: D36132939
fbshipit-source-id: 300ffa6cf16232573cd3a79a34c14daaafd7aa43
Summary:
I wrote a test for a vibration feature in a react native app by importing the `Vibration` module and using `jest.spyOn(Vibration, 'vibrate')`.
I had the following error:
```
Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'Vibration' could not be found. Verify that a module by this name is registered in the native binary.
```
That lead me to look for (and not find) a mock for the `Vibration` module in the code.
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
[General] [Fixed] - Add Jest mock for Vibration module
Pull Request resolved: https://github.com/facebook/react-native/pull/30643
Test Plan:
I would be glad to provide a test plan for this, but as it is part of testing I don't really know how to do so.
Any suggestion or help is welcome!
Reviewed By: yungsters
Differential Revision: D36097003
Pulled By: cortinico
fbshipit-source-id: 58683120da34f40e142a44c4bef8a5fced04bac2
Summary:
Jest 28 will error if only a string is returned from a transfomer, it needs to be an object of `{code: string, map?: object}`. Returning an object has been supported since https://github.com/facebook/jest/pull/2290, released in Jest v20.
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
[Internal] [Fixed] - Return object from Jest preprocessor
Pull Request resolved: https://github.com/facebook/react-native/pull/33576
Test Plan: Green CI?
Reviewed By: motiz88
Differential Revision: D35426748
Pulled By: robhogan
fbshipit-source-id: 3edb79b62b2d34274be192061817d3fcd8a7ba17
Summary:
Changelog:
[General][Deprecated] Deprecate the use of `react-native/jest/preprocessor.js` by external projects
The supported method of using Jest in React Native projects is using the [Jest preset](https://jestjs.io/docs/tutorial-react-native) shipped as part of the `react-native` package. Some projects are directly using `preprocessor.js` which is part of the testing setup for the React Native repo itself.
In a future release of React Native, we will stop publishing this file to npm and require projects to switch to the supported preset (or a custom Jest config if necessary).
Reviewed By: GijsWeterings
Differential Revision: D34820086
fbshipit-source-id: 197c33726639e66c6916a244117252e6af11f2f6
Summary:
React Native has an *implicit* dev dependency on this transform via `metro-react-native-babel-transformer`. The transform replaces `Object.assign` with `babelHelpers.extend`, but `Object.assign` has been available natively since node 4.
We intend remove it from metro (https://github.com/facebook/metro/pull/745) as it's no longer needed by any supported runtime - removing RN's small dependency in advance so RN's tests won't break when we do.
Changelog:
[Internal][Changed] - Remove `babel/plugin-transform-object-assign` from jest preprocessor
Reviewed By: motiz88
Differential Revision: D34110208
fbshipit-source-id: 064f8241461fb338de1cd8b53077e8660301aa77
Summary:
Fixes https://github.com/facebook/react-native/issues/32939
It appears there is circular dependencies on the Modal component that causes the modalMock function to be an empty object. Removing the import fixes the issue.
I don't know yet why this is not happening when executing the test suite inside `Modal-test.js` but I will investigate this later.
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
[General] [Fixed] - Fix error "mockModal is not a function"
Pull Request resolved: https://github.com/facebook/react-native/pull/32964
Test Plan:
On a newly initiated project using react-native 0.67.1 I created a ModalComponent:
```
import React from 'react';
import {Modal, Text} from 'react-native';
export const ModalComponent = () => {
return (
<Modal visible>
<Text>Test</Text>
</Modal>
);
};
```
and a ModalComponent.test.tsx:
```
import 'react-native';
import React from 'react';
import {ModalComponent} from '../ModalComponent';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('renders correctly', () => {
renderer.create(<ModalComponent />);
});
```
Running the test throws the error "TypeError: mockModal is not a function".
After modifying the mockModal inside node_modules/react-native/jest/mockModal.js it works correctly.
Reviewed By: christophpurrer
Differential Revision: D33771136
Pulled By: lunaleaps
fbshipit-source-id: c09ada8d2f864f5568b3379616a6cace9fb9921e
Summary:
Eliminates all of the console logs that appear when successfully running Jest tests for React Native.
Changelog:
[Internal]
Reviewed By: lunaleaps
Differential Revision: D32304619
fbshipit-source-id: 8bc8ef9337ae6af588238cec7cfb874ac6067340
Summary:
The Modal's mock always render its children (whether it is visible or not), whereas in reality the Modal renders `null` when the Modal is not visible.
This causes troubles when trying to test whether the Modal is visible or not. Instead of testing if the children are rendered (using getByText from React Native Testing Library for instance), we are forced to test the value of the visible prop directly (see https://github.com/callstack/react-native-testing-library/issues/508 and https://github.com/callstack/react-native-testing-library/issues/659).
This is not ideal because we are forced to test implementation detail and can't test from the user perspective. I also believe the mock should be closest as possible from reality.
I had 2 options:
1. Rendering the Modal without its children
2. Not rendering the Modal at all
The latter has the advantage of being closer to the reality, but I chose the former to still be able to test the Modal through the visible prop, so there is no breaking change (only snapshots update will be required).
## Changelog
[General] [Changed] - Update Modal's mock to not render its children when it is not visible
Pull Request resolved: https://github.com/facebook/react-native/pull/32346
Test Plan:
I added a test case when visible is false, then updated the mock so the children are not rendered. The before / after is here:
Reviewed By: yungsters
Differential Revision: D31445964
Pulled By: lunaleaps
fbshipit-source-id: 08501921455728cde6befd0103016c95074cc1df
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`:
```js
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
Pull Request resolved: https://github.com/facebook/react-native/pull/28067
Test Plan: Are there tests to check if the test environment is setup correctly? �
Reviewed By: yungsters
Differential Revision: D30317021
Pulled By: charlesbdudley
fbshipit-source-id: 837ed952833ef8e70c5132c9b4152b0e0f28b4dd
Summary:
Removed FlowFixMe that has been fixed
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
[General] [Fixed] - Removed FlowFixMe that has been fixed
Pull Request resolved: https://github.com/facebook/react-native/pull/29468
Test Plan: flow check passes
Reviewed By: JoshuaGross
Differential Revision: D29967702
Pulled By: lunaleaps
fbshipit-source-id: 541279287ba6f21c5c7290bcba7c282f092126ff
Summary:
This fixes how ES modules are handled in Jest tests in the react-native codebase.
They caused some problems before because `import` statements weren't inlined as `require` calls were, so there were some errors in tests when migrating from CommonJS to ESM.
This changes the transform that Jest uses to inline import statements the same way, so we can migrate everything without issues in tests.
Changelog: [Internal]
Reviewed By: kacieb
Differential Revision: D28899692
fbshipit-source-id: 027690f57ca3b5613c261a1089c0635af76662b2
Summary:
This diff and stack migratest Migrate UIManager.getViewManagerConfig -> UIManager.hasViewManagerConfig
This is necessary to avoid initializing UIManagerModule to detect if a component is registered into the native platform
changelog: [internal] internal
Reviewed By: fkgozali
Differential Revision: D27983716
fbshipit-source-id: 504180d8883959835e736f8081610b8c49810803
Summary:
This change caused crashes in animations on some surfaces.
Changelog: [Internal]
Reviewed By: JoshuaGross
Differential Revision: D28013969
fbshipit-source-id: 95845c69d6e67d59582ea14ad08cbf42fd3e2f8f
Summary:
D27682424 (ea1ff374de) updated how animated node batches are executed in Fabric. On Paper, these batches were controlled by native module in some places (batch was executed ~every 2 frames), but some animations were switching animation batching control to JS globally there as well.
This change updates two things:
- If batching is controlled by native, it makes sure batches are calculated correctly.
- At the same time, this change switches control for animation node batching to JS, aligning it with Fabric.
Changelog: [Internal]
Reviewed By: JoshuaGross, mdvacca
Differential Revision: D27939659
fbshipit-source-id: d6251bce2a303a4a007dc10297edc0175cc4b348
Summary:
Unifies the platform-specific implementations of `AccessibilityInfo` to simplifying checking Flow types and making changes to the module.
Changelog:
[Internal]
Reviewed By: mdvacca
Differential Revision: D27578847
fbshipit-source-id: 84dc274a66acd22fc6f1dd2773a4e4630761e17d
Summary:
This diff is a revert of the stack D27276533. the native fix will be included as part of another diff
changelog: [internal] internal
Reviewed By: JoshuaGross, ShikaSD
Differential Revision: D27332513
fbshipit-source-id: 203051ea8fec3f508d79c329c9b61399fbbc3d1b
Summary:
This diff and stack migratest Migrate UIManager.getViewManagerConfig -> UIManager.hasViewManagerConfig
This is necessary to avoid initializing UIManagerModule to detect if a component is registered into the native platform
changelog: [internal] internal
Reviewed By: sammy-SC
Differential Revision: D27276526
fbshipit-source-id: f3cc0218506ea2066a0d85f956b15a0e40f2e072
Summary:
Updates the AppState Jest mock to correspond to recent API changes.
Changelog:
[General][Fixed] - Updated AppState Jest mock to match new public API
Reviewed By: yungsters
Differential Revision: D26295371
fbshipit-source-id: e6e39f23d9100f0eacf257f45d509c5364dcb28d
Summary:
ES Modules implicitly enable strict mode. Adding the "use strict" directive is, therefore, not required.
This diff removes all "use strict" directives from ES modules.
Changelog:
[Internal]
Reviewed By: motiz88
Differential Revision: D26172715
fbshipit-source-id: 57957bcbb672c4c3e62b1db633cf425c1c9d6430
Summary:
`sendAccessibilityEvent_unstable` is a cross-platform, Fabric/non-Fabric replacement for previous APIs (which went through UIManager directly on Android, and a native module on iOS).
Changelog: [Added] sendAccessibilityEvent_unstable API in AccessibilityInfo and sendAccessibilityEvent in React renderer
Reviewed By: kacieb
Differential Revision: D25821052
fbshipit-source-id: 03f7a9878c95e8395f9102b3e596bfc9f03730e0
Summary:
This diff removes the call to UIManager.getViewManagerConfig into the deprecatedPropType method when static view configs are enabled
This was necessary to avoid innecessary calls to UIManager.getViewManagerConfig and to avoid loading UIManagerModule classes when static view configs are enabled
changelog: [internal] internal
Reviewed By: fkgozali, yungsters
Differential Revision: D26040855
fbshipit-source-id: 82cad9f4abe9898e781fd989ebaa03497dad926b
Summary:
The current version of Flow fails to report some errors in library definitions. I'm
working on a Flow fix that would surface these errors. In preparation for this, this diff:
* replaces `FbtErrorListener` (missing) with `IFbtErrorListener` in fbt.js
* fixes typos in several files
* suppresses missing names with `[cannot-resolve-name]`
* adds `sourceMapTarget` option in babel-generator
Changelog: [Internal]
Reviewed By: jbrown215
Differential Revision: D25839533
fbshipit-source-id: 947207db9238aa10663616d59080440d2ac6f243
Krzysztof Magiera
Luna Wei
Ruslan Lesiutin
Nick Gerleman
Moti Zilberman
Thibault Malbranche
Simen Bekkhus
Lorenzo Sciandra
Adrian Hartanto
Rujin Cao
Elliott Kember
Rob Hogan
Gabriel Donadel Dall'Agnol
Antoine Doubovetzky
Paige Sun
Geraint White
Deepak Jacob
hduprat
Andres Suarez
Tim Yung
Rubén Norte
grgr-dkrk
Timo Mämecke
Jesse Katsumata
Chris Shepherd
David Vacca
Andrei Shikov
grgr-dkrk
Jimmy Zhang
Luna Wei
Shaozhen Zhang
Micha Reiser
Joshua Gross
Panagiotis Vekris
