Registry / testing / react-cosmos-fetch-proxy

react-cosmos-fetch-proxy

library4.8.2jsnpmunverified

A fixture proxy for React Cosmos that enables mocking of fetch API responses during component development and testing. Version 4.8.2 is the latest stable release, part of the react-cosmos-classic line (pre-5.x). This proxy allows developers to define mock fetch responses declaratively in fixtures, avoiding the need for a separate mock server or service worker. It integrates seamlessly with React Cosmos’s fixture system, supporting dynamic responses based on request properties. Lightweight and focused, it differs from more general mocking libraries like MSW by being purpose-built for Cosmos’s fixture-driven workflow. No release cadence information is available.

testing

npm install react-cosmos-fetch-proxy

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-COSMOS-FETCH

react-cosmos-fetch-proxy

testingjavascriptv4.8.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import FetchProxy from 'react-cosmos-fetch-proxy'

✗ const FetchProxy = require('react-cosmos-fetch-proxy').default

Default export is the proxy class. Use default import syntax.

FetchProxy

✓ import { FetchProxy } from 'react-cosmos-fetch-proxy'

✗ import FetchProxy from 'react-cosmos-fetch-proxy/FetchProxy'

Named export also available, same as default export.

mockFetch

✓ import { mockFetch } from 'react-cosmos-fetch-proxy'

Utility function for unit testing outside of React Cosmos.

Shows how to set up FetchProxy in React Cosmos config and define mock fetch responses in fixtures.

// createCosmos.js import FetchProxy from 'react-cosmos-fetch-proxy'; export default { proxies: [ [FetchProxy, { fixtures: { 'https://api.example.com/user': { GET: { status: 200, body: { id: 1, name: 'John' } }, }, }, }], ], }; // MyComponent.fixture.js import { useLoader } from 'react-cosmos-loader'; export default { component: 'MyComponent', props: {}, fetch: [ { matcher: 'https://api.example.com/data', response: { status: 200, body: { items: [] } }, }, ], };

Debug

Known issues

gotchaFetchProxy does not intercept fetch requests automatically if you use an alternative HTTP client like axios.

fix

Ensure your component uses the native fetch API, or use a polyfill.

affects: >=4.0.0

deprecatedThe 'fixtures' option in proxy config is deprecated; use per-fixture fetch definitions instead.

fix

Define fetch mocks inside individual fixtures using 'fetch' key.

affects: <=4.8.2

gotchaFetchProxy only works with React Cosmos Classic (pre-v5). It is not compatible with React Cosmos v5+.

fix

Use alternative mocking libraries for React Cosmos v5+.

affects: >=5.0.0

Errors

Common errors & fixes

Fetch is not defined

FetchProxy requires a global fetch implementation. In Node <18, fetch is not available natively.

fix

Install and import 'node-fetch' in your Cosmos setup: import 'node-fetch';

Uncaught TypeError: Cannot read properties of undefined (reading 'GET')

Fixture fetch definition missing HTTP method key or response object.

fix

Ensure fetch fixture has method property or response object properly defined: { matcher: '...', response: { status: 200, body: {} } }

FetchProxy is not a constructor

Incorrect import syntax using default import without default export.

fix

Use import FetchProxy from 'react-cosmos-fetch-proxy' or const FetchProxy = require('react-cosmos-fetch-proxy').default

Upgrade

Version history

4.8.2latest on npm

Audit

Dependencies

react-cosmos-fixturerequiredPeer dependency required for fixture proxy infrastructure.

Agent activity

11 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/react-cosmos/react-cosmos-classic/tree/master/packages/react-cosmos-fetch-proxy ↗

packagereact-cosmos-fetch-proxy ↗

homepagehttps://github.com/react-cosmos/react-cosmos-classic/tree/master/packages/react-cosmos-fetch-proxy ↗