Javascript 使用ajax请求测试反应单击按钮

我正在尝试测试一个简单的登录组件，我想填写电子邮件和密码，然后点击按钮登录。 当我单击登录按钮时，它会使用axios创建一个ajax post请求。 所以我想试一下快乐和不快乐的道路。第一个测试应该是在错误的post请求之后找到一个内部有错误的html元素

这是我的LoginComponent简化版：

import React from "react";
import axios from "axios";
import { login } from "../utils";
import {Link} from "react-router-dom";

export default function Login(props) {
    const { email: propsEmail, password: propsPassword } = props;
    const [email, setEmail] = React.useState(propsEmail || "");
    const [password, setPassword] = React.useState(propsPassword || "");
    const [error, setError] = React.useState(""); 

    React.useEffect(() => {

    }, [email, password]);

    const handleEmailChange = event => {
        const emailValue = event.target.value.trim();
        setEmail(emailValue);
    };

    const handlePasswordChange = event => {
        setPassword(event.target.value);
    };

    const handleSubmit = event => {
        const params = new URLSearchParams();
        params.append("email", email);
        params.append("password", password);

        axios
            .post(
                "http://localhost:8080/auth",
                params,
            )
            .then(response => {
                if (response.data.token !== undefined) {
                    login(response.data.token);
                    this.props.history.push("/game");
                }
                else {
                   setError("Error");
                }
            })
            .catch(error => {
                setError("Error2");
            });
        event.preventDefault();
    };

    return (
        <div className="Login">
            <h1>Login</h1>
            <form onSubmit={handleSubmit}>
                <input
                    type="email"
                    name="email"
                    placeholder="Email"
                    data-testid="email"
                    value={email}
                    onChange={handleEmailChange}
                    required
                />

                <input
                    type="password"
                    name="password"
                    placeholder="Password"
                    value={password}
                    onChange={handlePasswordChange}
                    required
                />

                <button type="submit" id="login-btn" className="btn btn-primary btn-block">Login</button>
            </form>
            <Link to='/sign-in'>Register</Link>

            <p id="error" data-testid="error">{error}</p>
        </div>
    );
}

我试过模仿，间谍等等。。。但我还没有找到解决办法

有人能帮我吗？

---

谢谢

我在酶方面没有太多的经验，但是从我可以看出，您必须测试内部文本，但您正在测试HTML元素。使用

.test（）

函数代替

.html（）

expect（wrapper.find（#error”）.text（））.toEqual（“Error2”）

应该可以
我在酶方面没有太多的经验，但是从我可以看出，您必须测试内部文本，但您正在测试HTML元素。使用
.test（）
函数代替
.html（）

expect（wrapper.find（#error”）.text（））.toEqual（“Error2”）

正如我所写的那样，应该可以正常工作。
不是text（）或html（）的问题，因为内容是空的，所以元素内部没有“Error2”。正如我所写的那样，不是text（）或html（）的问题，因为内容是空的，所以元素内部没有“Error2”
jest.unmock("axios");
import React from "react";
import Enzyme,  { shallow, mount } from "enzyme";
import Login from "./Login";
import Adapter from "enzyme-adapter-react-16";
import {BrowserRouter, Switch} from "react-router-dom";
import axios from "axios";
import {cleanup, waitForElement, getByTestId} from "@testing-library/react";
import MockAdapter from "axios-mock-adapter";

Enzyme.configure({ adapter: new Adapter() });

afterEach(cleanup);

describe("Login component", () => {
   it("Testing the onSubmit Event", async () => {
        var mock = new MockAdapter(axios);
        const data = { response: true };
        mock.onPost("http://localhost:8080/auth").reply(500, data);

        const handleSubmitMock = jest.fn();
        const props =
        { email: "testUser1", password: "password1" };
        const wrapper = shallow(<Login  {...props} />);

        wrapper.find("#login-btn")
            .simulate("click");

        await Promise.resolve();
        expect(wrapper.find("#error").html()).toEqual("Error2");
    });


});



Expected: "Error2"
    Received: ""