Jest Как проверить ошибку при отправке данных на сервер из формы? - PullRequest
Новая
       20

Jest Как проверить ошибку при отправке данных на сервер из формы?

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

Рассмотрим следующий код: 

class Dashboard extends Component {
  state = {
    fileName: "",
    group: "",
    country: "",
    error: ""
  };
  onFormSubmit = async e => {
    e.preventDefault();
    const { group, country } = e.target;
    try {
      await axios.post("/api/dashboard", {
        name: group.value,
        country: country.value,
        image: this.state.fileName
      });
    } catch (error) {
      console.log(error.response.data.message);
      this.setState({ error: error.response.data.message });
    }
  };

  render() {
    return (
      <div>
        <form onSubmit={this.onFormSubmit}>
          <input
            type="text"
            onChange={this.onGroupChange}
            name="group"
            placeholder="Group Name"
            value={this.state.group}
          />
          {this.state.error}
          <input
            type="text"
            onChange={this.onCountryChange}
            name="country"
            placeholder="Country"
            value={this.state.country}
          />
          <ImageUpload
            fileName={this.state.fileName}
            onFileNameChange={this.onFileNameChange}
          />
          <button type="submit">Add Group</button>
        </form>
      </div>
    );
  }
}

Я пытаюсь проверить состояние error, установленное на соответствующее значение, когда пост-запрос завершается неудачно. Вот тест до сих пор: 

  it("should set error state when dashboard api returns error", async () => {
    const errorMsg = "Group already exist";
    moxios.stubRequest("/api/dashboard", {
      status: 400,
      response: {
        message: errorMsg
      }
    });
    const event = {
      preventDefault: () => {},
      target: {
        group: "",
        country: ""
      }
    };
    const wrapper = shallow(<Dashboard />);
    await wrapper.find("form").simulate("submit", event);
    console.log(wrapper.state("error").value);
    expect(wrapper.state("error")).toBe(errorMsg);
  });

1 Ответ

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

Поскольку метод onformSubmit равен async, вы можете использовать несколько подходов:

1 Ожидайте асинхронный метод напрямую: 

it(
  'should set error state when dashboard api returns error',
  async () => {
    const wrapper = shallow(<Dashboard />);
    await wrapper.instance().onFormSubmit(event);
    expect(wrapper.state('error')).toBe(errorMsg);
  }
);

и отдельно проверить, что метод onFormSubmit был вызван для submit событие

2 Использовать таймаут с возвратом Promise: 

it(
  'should set error state when dashboard api returns error',
  () => {
    const wrapper = shallow(<Dashboard />);
    wrapper.find("form").simulate("submit", event);
    return new Promise(resolve => setTimeout(resolve, 1)).then(() => {
      expect(wrapper.state('error')).toBe(errorMsg);
    });
  },
  1000
);

3 дождитесь отметки перед проверкой: 

function tick() {
  return new Promise(resolve => {
    setTimeout(resolve, 1);
  });
}

... 

it('should set error state when dashboard api returns error', async () => {
  const wrapper = shallow(<Dashboard />);
  wrapper.find('form').simulate('submit', event);
  await tick();
  expect(wrapper.state('error')).toBe(errorMsg);
});

4 Использование done обратного вызова: 

it('should set error state when dashboard api returns error', done => {
  const wrapper = shallow(<Dashboard />);
  wrapper.find('form').simulate('submit', event);
  setImmediate(() => {
    expect(wrapper.state('error')).toBe(errorMsg);
    done();
  });
});
...