question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to intercept React Native Image source URI requests in Jest tests

See original GitHub issue

I’m trying to use msw in Jest tests (so, Node) to intercept React Native’s Image component network requests. I have no need to leverage msw in RN itself at this time, so this should pertain purely to Node integration (as I understand it). I messed around with various uses of react-native-url-polyfill and node-fetch to no avail, but they are not currently utilized in the reproduction below.

Environment

Name Version
msw 0.24.2
node 14.15.1
OS Windows 10 and macOS Big Sur

Request handlers

import { setupServer } from 'msw/node'
import { rest } from 'msw'

const server = setupServer(
  rest.get('anything-other-than-source-uri-provided-to-image', () => {...})
)

server.listen({ onUnhandledRequest: 'error' })

Actual request

<Image source={{ uri: 'https://some-unhandled-uri' }} />

Current behavior

Test renders the component without errors.

Expected behavior

Expected msw to throw as there is no handler defined for the source URI provided, and onUnhandledRequest is set to 'error'.

Full Reproduction

https://github.com/wKovacs64/msw-rn-test

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
marcosvega91commented, Dec 20, 2020

I have tried also with DEBUG=* but I don’t see any log from interceptors. I only see about patching

0reactions
kettanaitocommented, Dec 25, 2020

Per @marcosvega91:

Image component should fetch images using ios/android native code so I think that we can’t do more here.

It doesn’t seem we can tackle this on the library’s side. If anybody finds out more details, please comment here. Thanks.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Jest+React Native Testing Library: How to test an image src?
It's a little hard to say because we can't see <ImageBackground> component or what it does ...
Read more >
How to mock API calls in React Native - DEV Community ‍ ‍
At interception, it generates random data mocking the API. We'll run our tests in Node.js with Jest. We use React Native Testing Library...
Read more >
Testing your React App with Puppeteer and Jest | by Rajat S
Go to src/App and create a new file called App.test.js . ... successful requests, and also intercept the request and force the failure...
Read more >
Testing React Native Todo Application Using Cypress
IntroductionRecently I have read a nice guide to writing unit and integration tests using Jest for a React Native Todo app.
Read more >
React Native WebView: A complete guide - LogRocket Blog
Creating the basic URL structure; Writing the basic inline HTML; Communicating between JavaScript and Native; The injectJavaScript method. Below ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found