Giter Club home page Giter Club logo

Comments (8)

jameslnewell avatar jameslnewell commented on June 24, 2024

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.

SunnyWind avatar SunnyWind commented on June 24, 2024

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.

jameslnewell avatar jameslnewell commented on June 24, 2024

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.

SunnyWind avatar SunnyWind commented on June 24, 2024
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.

SunnyWind avatar SunnyWind commented on June 24, 2024

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.

prantlf avatar prantlf commented on June 24, 2024

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.

jameslnewell avatar jameslnewell commented on June 24, 2024

@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.

jameslnewell avatar jameslnewell commented on June 24, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.