reactjs - Enzyme/Jest onSubmit 不调用提交函数

Question

我无法检查我的模拟操作是否是从表单上的 onSubmit 调用的:

登录表单:

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
    };
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.loginUser(this.state.email, this.state.password);
  };

  handleChange = event => {
    const { value } = event.target;
    const { name } = event.target;
    this.setState({
      [name]: value,
    });
  };

  render() {
    const { t } = this.props;

    return (
      <div className="login-container>
        <form data-test-id="login-form" onSubmit={this.handleSubmit}>
            <TextComponent
              label="Email"
              testId="login-email"
              value={this.state.email}
              handleChange={this.handleChange}
            />
            <div className="my-3" />
            <TextComponent
              label="Password"
              testId="login-password"
              value={this.state.password}
              handleChange={this.handleChange}
            />
            <button action="submit" data-test-id="login-button">
              {t("en.login")}
            </button>
        </form>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    authenticated: state.login.authenticated,
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ loginUser }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(withTranslation()(Login));

测试:

import { mount, shallow, render } from "enzyme";
import React from "react";
import { Provider } from "react-redux";
import { I18nextProvider } from "react-i18next";
import { Router } from "react-router-dom";
import { findByTestAtrr, testStore } from "../../test/utils/utils";
import Login from "../../src/Login/index";
import i18n from "../../src/i18n";
import history from "../../src/history";


const setUp = loginUser => {
  const initialState = {
    login: {
      authenticated: true,
    },
  };

  const store = testStore(initialState);
  const wrapper = mount(
    <I18nextProvider i18n={i18n}>
      <Provider store={store}>
        <Router history={history}>
          <Login onSubmit={loginUser} />
        </Router>
      </Provider>
    </I18nextProvider>
  );
  return wrapper;
};

  describe("submit button", () => {
    let emailInput;
    let passwordInput;
    let submitButton;
    let newWrapper;
    let loginAction;
    beforeEach(() => {
      loginAction = jest.fn();
      newWrapper = setUp(loginAction);

      emailInput = findByTestAtrr(newWrapper, "login-email");
      emailInput.instance().value = "email.com";
      emailInput.simulate("change");

      passwordInput = findByTestAtrr(newWrapper, "login-password");
      passwordInput.instance().value = "password";
      passwordInput.simulate("change");

      submitButton = findByTestAtrr(newWrapper, "login-button");
    });

    it("login action is called", () => {
      console.log(submitButton.debug());
      submitButton.simulate("submit");
      expect(loginAction).toHaveBeenCalledTimes(1);
    });
  });
});

我能够模拟向电子邮件和密码添加值，但我无法模拟 onClick 工作。我是否错误地测试了提交功能？

这是我console.log时的提交按钮

console.log __tests__/integration_tests/login.test.js:97
  <button action="submit" data-test-id="login-button">
    Log in
  </button>

错误:

期望(开 Jest .fn()).toHaveBeenCalledTimes(期望)

Expected number of calls: 1
Received number of calls: 0

Answer 1

从 2016 年开始在 github 上提出:Simulated click on submit button in form does not submit form #308 ，这个问题在我使用 Jest + Enzyme (2020) 的项目中仍然存在。

有一些解决方法，例如使用 tape 或 sino。

另一种解决方案是获取 DOM 元素并在不使用模拟的情况下触发点击(转到 given link ，向下滚动线程以了解更多信息)。

如果有人找到了模拟表单提交的解决方案，请在此处标记我。谢谢。