Jest 如何在从表单向服务器提交数据时测试错误？

Question

考虑以下代码：

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

Answer 1

由于方法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();
  });
});