Как я могу "перехватить" запрос в шутку, используя фермент? - PullRequest
Новая
       43

Как я могу "перехватить" запрос в шутку, используя фермент?

0 голосов
/ 24 сентября 2018

У меня есть действие, использующее RSAA из redux-api-middleware, которое называется 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();

, но при этом происходит сбой: enter image description here

Итак, я хочу перехватить вызов API и позволить ему завершить выполнение действия как такового (отправка имени входа и sendFlashMessage).

Я пытался moxios, но это не такt работа: 

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

Я пытаюсь использовать sinon, чтобы решить эту проблему

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

Используя энзим с шут и синон .

пример кода: 

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');
})

В коде вышемы можем увидеть, как перехватывать вызовы API с помощью тестового DOM, созданного ферментом, а затем проверять ответы API с помощью sinon.

0 голосов
/ 25 сентября 2018

У Sinon нет непосредственного способа решить эту проблему для вас, используя его фальшивый аппарат XHR.Причина ясна из документации промежуточного программного обеспечения , которую вы используете:

Примечание: redux-api-middleware зависит от доступности глобального Fetch и может потребовать полизаполнения для вашей среды выполненияокружение (я).

Синон (или действительно его зависимая nise библиотека ) не работает с 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();
  });
});
...