Add globalObject: 'global'
for react native webpack config
#1738
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.
When running Jest tests with the 'react-native' preset (the default preset used when app is created with
react-native init
), tests are run in a Node.js environment (from docs). There are some slight differences, such as thethis
global variable being an empty object, and the 'window' global variable is present.When running Jest tests with the 'react-native' preset, it supports the
exports
field in the package.json file. It resolves libraries with anexports
field using thereact-native
condition.Our
react-native
exports condition exports anably-reactnative.js
bundle, which is built using webpack v5. By default, webpack v5 sets the globalObject toself
. In Node.js environments, theself
global property does not exist, so our React Native bundle fails with aReferenceError: self is not defined
when we try to run Jest tests.This issue does not occur for ably-js v1 because we don't use
exports
in the package.json file, and Jest, for some reason, doesn't recognize the rootreact-native
field in package.json. So, instead, when running Jest tests for React Native with ably-js v1, it uses our Node.js bundle, which hasglobal
for its globalObject.To fix the
ReferenceError: self is not defined
error for ably-js v2, we should change the globalObject to something supported both in Node.js environments when running Jest tests for React Native and in React Native itself. In ably-js v1, our bundles used the following global objects:ably-node
used 'global'ably-reactnative
used 'window'Based on my tests,
window === global
both when running Jest tests for React Native and when running a React Native app. So, we can useglobalObject: 'global'
for our React Native bundle in ably-js v2.NOTE
Even though this resolves the
ReferenceError: self is not defined
error for Jest tests, they will still fail with other errors likeReferenceError: WebSocket is not defined
. This is because Jest with 'react-native' preset is using a node environment, which doesn't load any DOM or browser APIs, but ourably-reactnative.js
bundle expects certain browser APIs likeWebSocket
to be available in the global scope.This is not something we can resolve directly, so users would need to either mock the Ably client or provide mocks for such browser APIs when running Jest tests (example here), or force Jest to use the ably-js node.js bundle by adding the following config to their
jest.config.js
:Or users can force Jest to resolve the
exports
field using thenode
condition for all bundles (although this is the least ideal solution):