Comments (8)
There isn't a similar method at the moment but it sounds like a feature that could be implemented.
Could you please provide me with a code example of how you'd use it? Is this for testing a component render?
from xhr-mock.
I'm writing UT for React components which mostly do an HTTP request after mounted. I need to check the state of components after the request was finished. Without the flush
method, I have to wait a few milliseconds to proceed with the check.
from xhr-mock.
Thanks for explaining it in more detail! Could you please you provide a minimal code example that demonstrates how the feature should work which we can use as a test?
from xhr-mock.
import React, { useState, useEffect } from 'react';
import Enzyme, { mount } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
import { expect } from 'chai';
import { request } from "mithril/request";
import xhrMock from 'xhr-mock';
Enzyme.configure({ adapter: new EnzymeAdapter() });
describe('The component', () => {
it('should update its state after it got a responce from the server', async () => {
xhrMock.get('/count', {
status: 200,
body: 1
});
const wrapper = mount(
<TestComp />,
);
// This method should wait until the request is finished
// await xhrMock.flush();
expect(wrapper.state('count')).to.be.equal(1);
});
});
const TestComp = () => {
const [count, setCount] = useState<number>(0);
useEffect(() => {
const res = await request({
method: 'GET',
url: '/count'
});
setCount(res);
}, []);
return (
<p>{count}</p>
);
};
I'm not sure the code is runnable...
from xhr-mock.
BTW, Is there a hacky and easy way to meet my requirements? I tried to modify the XMLHttpRequest and could not find a way to wrap the process into a Promise object.
from xhr-mock.
An API "wait for all" in XHRMock
would be nice, but it will not be as simple as in your example, if it should work in more complicated tests. Mocks may get registered among making requests. A mocked request can be executed multiple times. Maybe a scope object would help to group the mocked calls to wait for all?
As long as there is no API for this, you can use your own promises to wait just for the calls that you need. (If the mock was called multiple times, or if it was in other script as a shared utility, you could use an event emitter instead of the promise to inform the test about the finished request.)
For example:
let respond;
const responded = new Promise(resolve => (respond = resolve));
xhrMock.get('/count', (request, response) => {
// switch context to let the component update by the promise
setTimeout(respond);
return response.status(200).body(1);
});
const wrapper = mount(
<TestComp />
);
await responded;
expect(wrapper.state('count')).to.be.equal(1);
Alternatively, you could try watching for updates of the React
component.
from xhr-mock.
@SunnyWind I don't believe there's an easy way to implement the functionality in the current version (v2.5.1
) though it will be easy to implement in the next major version (v3
) which is (very slowly) under development.
from xhr-mock.
I was thinking the .flush()
* method would resolve when all incomplete requests are completed (that includes any requests that were initiated after .flush()
is called while waiting for the original requests).
@prantlf What would the API for a scope object look like? Can you provide a theoretical example? Thanks for the interim work around!
*I'm keen to hear people's opinion on the method name! e.g. .wait|flush|settle()
etc
from xhr-mock.
Related Issues (20)
- Test URL with Query string HOT 1
- Responsetype "arraybuffer" not implemented correctly
- Handler inside createMockFunction never gets triggered. HOT 1
- Simulating a timeout causes Jest to throw a ECONNREFUSED error but the tests pass HOT 1
- feat: support verbose log in dev mode? HOT 1
- Support params match?
- Jest passes but xhr-mock logs the Jest expectation failure to console.error
- Feature request for sending/setting cookies automatically when present.
- Is there a way to overwrite a request again?
- Request headers are not reset between .open() calls
- Unclear how to test upload progress HOT 1
- xhr.readyState = 2 // xhr.status = 0 HOT 1
- Examples for mocks set up using regular expressions HOT 1
- Add xhrMock.all method for all of get, post, put, patch, delete HOT 1
- Add url masks please HOT 2
- New release HOT 2
- sequence is not a function HOT 2
- Latest release doesn't published HOT 1
- Release latest changes to npm HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from xhr-mock.