score:0
Accepted answer
So apparently the test was still using the global fetch library, and not my patched version. The solution was to:
- Remove the 'isomorphic-fetch' mock (in
__mocks__
at the root of the project). - Import 'isomorphic-fetch' once at the root of my project with
import 'isomorphic-fetch;
- Remove the 'isomorphic-fetch' import at the top of my api module (since it's already imported at the entrypoint
- Update the test to:
test:
// to make the Response constructor available
import 'isomorphic-fetch';
import { getJson } from '../api';
describe('api middleware', () => {
describe('getJson', () => {
beforeEach(() => {
window.fetch = jest.genMockFunction();
});
it('should return the response on success', () => {
const expected = { data: ['data'], meta: {} };
const body = JSON.stringify(expected);
const init = { status: 200, statusText: 'OK' };
window.fetch.mockReturnValueOnce(Promise.resolve(new Response(body, init)));
return getJson('http://endpoint').then(actual => expect(actual).toEqual(expected));
});
});
});
score:-1
Most probably because your getJson
function does not use the global (window) fetch
.
The way I would suggest doing it is to use Dependency Injection (DI); make getJson
retrieve the the "http request" library/function (in your case fetch
) and in your tests, create a mock function which is injected. The mock function will return the data that you want as part of testing.
Source: stackoverflow.com
Related Query
- Why does this mock api not work as expected?
- Why ES6 ComputedPropertyName does not work with this react js code?
- ReactJS. - Why does this work in ReactJS and not the other way
- Why react-router-dom does not work in this code
- Fetch api does not work as expected from react using rails as a backend
- Why does my mock of my api return a 404 error?
- Why does hot reloading not work for reactjs visual studio 2019 template
- Why formData does not work with multiple files?
- Why does TypeScript assertion of object literal `{a}` work with interface `{a, b}` but not `{a?, b}`
- Why does React.createRef() for material-ui Button element in TypeScript not work correctly?
- In React why does calling a function from another function in our code not work and display?
- Why does select() not work on Safari with ReactJS?
- Why React-router v4 <Link/> does not work (Changes url but not rendering content)?
- Why custom css class does not work on React-Semantic-UI elements?
- Why does custom Button component using MUI Button not work on hover with Tooltip?
- Why does "npm start" work but not "react-scripts start" which is what "npm start" apparently executes?
- The resetForm method of Formik does not work as expected
- Why does removeEventListener not work on event handlers installed by React?
- Web Share Target API does not work on Android 9 with OS version
- <Link> does not work as expected in NextJS
- Why does my HOC NotEmpty not work when access property?
- Why does the jest mock function not getting executed in my test with react testing library?
- React, increment global variable does not work as expected
- Passing imported style object into a custom hook does not work as expected
- why does this react/javascript "removeEventListener" not remove the listener?
- Why does window.location not work in my react component?
- Why does shallow Rendering not work as expected?
- Why does useEffect React Hook not work properly with dependency?
- document.createElement does not work as expected in componentDidMount in React?
- why <Redirect to='/vacations' /> Does not work
More Query from same tag
- Render is not a function updateContextConsumer
- Spread an array of components in render in React
- I am accidentally calling the Contentful API every couple of millisenconds
- Check if a value of an array exist in an object in a different array
- React state change doesn't rerender cloned children
- Loop through array of multiple images to upload individually to AWS s3 ReactJS
- How to iterate JSON nested array in REACT JS API call?
- How to make an AppBar Component fill all div's width and 10% of its height?
- Only need the Promise synchronicity return, not it's value when using '.then'
- Basic React: why is a variable in local storage resetting to undefined after briefly being the desired value?
- How to run front end and back end in same port to deploy in tomcat server?
- Is there a way to terminate and restart a new web socket connection onchange of props?
- Caching with react-query and react-router-dom
- How to test a React component that has Router, Redux and two HOCs... with Jest and Enzyme?
- Convert class-redux component to functional hooks component
- smooth animation of the size of a functional component during state change
- textfields, icon and label in a single line
- How get data from material-ui TextField, DropDownMenu components?
- avoiding using .bind with ES6 =>
- how to take data from redux in index.js
- reactjs - useRef() with function component
- While i am trying to open my react app the CMD showing an npm err! Saying 'npm err! missing script:start' can anyone help me?
- React component was not re-rendered and updated after redux store change
- How to make a direct link, so it resets the whole path in React-router-dom
- Display none to React micro animations on component
- How can I allow access to specific React Hash Routes using Spring Security?
- Input validation in react with functional component and useEffect hook
- functional react: how to handle setState with an input from map function?
- How to get api's response when posting data?
- how to implement mixitup js library in react js app