У меня есть действие createUser, использующее RSAA из redux-api-middleware:

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

0
fcabanasm 24 Сен 2018 в 23:43

2 ответа

Лучший ответ

Использование фермента с jest и 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');
})

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

0
fcabanasm 23 Окт 2018 в 14:25

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

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

Sinon (или на самом деле его зависимая 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();
  });
});
0
oligofren 25 Сен 2018 в 12:49