我如何 "intercept" 开玩笑地请求使用酶？

Question

我有一个使用来自 redux-api-middleware 的 RSAA 的操作，名为 createUser：

export const createUser = values => {
  const email = values.get("user_attributes[email]");
  const password = values.get("user_attributes[password]");
  return dispatch => {
    dispatch({
      [RSAA]: {
        endpoint: `${globalVar.API_URL}/users/`,
        method: "POST",
        body: values,
        types: [
          CREATE_USER,
          {
            type: CREATE_USER_SUCCESS,
            payload: (action, state, response) => {
              return response.json().then(json => {
                dispatch(login(email, password));
                dispatch(sendFlashMessage("success", json.message));
                return json;
              });
            }
          },
          CREATE_USER_FAILURE
        ]
      }
    });
  };
};

...我有一个使用此操作的 redux-form 组件：

class UserNew extends Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(values) {
    values = { user_attributes: values };
    const data = objectToFormData(values);
    this.props.actions.createUser(data);
  }

  render() {
    const { handleSubmit, errors } = this.props;
    return (
      <UserForm
        handleSubmit={handleSubmit}
        onSubmit={this.onSubmit}
        errors={errors}
      />
    );
  }
}

在我的 jest 和 enzyme 测试文件中：

it("create new user", done => {
  wrapper
    .find("#sign-up")
    .hostNodes()
    .simulate("click");

  wrapper
    .find('[name="first_name"]')
    .hostNodes()
    .simulate("change", { target: { value: "User" } });

 ...

...完成表格后：

wrapper
  .find("form")
  .hostNodes()
  .simulate("submit");
done();

但它崩溃了：

所以，我想拦截 API 调用并让它完成执行操作（调度登录和 sendFlashMessage）。

我尝试了 moxios 但没有用：

moxios.install();
moxios.stubRequest(`${globalVar.API_URL}/users/`, {
  status: 200,
  response: [{user: {...}, message: "OK"}]
});

我正在尝试使用 sinon 来解决这个问题

Answer 1

Sinon 没有任何直接的方法可以使用其伪造的 XHR 机制为您解决此问题。从您使用的 middleware documentation 可以清楚地看出原因：

Note: redux-api-middleware depends on a global Fetch being available, and may require a polyfill for your runtime environment(s).

Sinon（或者实际上它的依赖 nise library）不处理 Fetch，只处理 XHR。

您可以使用像 fake-fetch 这样的库，也可以自己存根 fetch。不过，这将涉及相当复杂的存根，包括存根复杂的响应，所以我宁愿这样做：

var fakeFetch = require('fake-fetch');

beforeEach(fakeFetch.install);
afterEach(fakeFetch.restore);

it("should fetch what you need", done => {
  fakeFetch.respondWith({"foo": "bar"});

  fetch('/my-service', {headers: new Headers({accept: 'application/json'})}).then(data => {
    expect(fakeFetch.getUrl()).toEqual('/my-service');
    expect(fakeFetch.getMethod()).toEqual('get');
    expect(data._bodyText).toEqual('{"foo":"bar"}');
    expect(fakeFetch.getRequestHeaders()).toEqual(new Headers({accept: 'application/json'}));
    done();
  });
});

Answer 2

使用 enzyme with jest and sinon.

示例代码：

import { mount } from "enzyme";
import sinon from "sinon";

beforeAll(() => {
 server = sinon.fakeServer.create();
 const initialState = {
  example: ExampleData,
  auth: AuthData
 };
 wrapper = mount(
  <Root initialState={initialState}>
    <ExampleContainer />
  </Root>
 );
});

it("example description", () => {
  server.respondWith("POST", "/api/v1/example", [
    200,
      { "Content-Type": "application/json" },
      'message: "Example message OK"'
    ]);
  server.respond();
  expect(wrapper.find(".response").text().to.equal('Example message OK');
})

在上面的代码中，我们可以看到如何使用酶创建的测试 DOM 拦截 API 调用，然后使用 sinon 模拟 API 响应。

我如何 "intercept" 开玩笑地请求使用酶？

How can i "intercept" request in jest using enzyme?

jsdom

sinon

reactjs

jestjs

enzyme