Question

我正在尝试测试一个简单的Login组件，我想在其中填写电子邮件和密码，然后单击一个按钮以登录。当我单击登录按钮时，它将使用axios创建一个ajax发布请求。所以我想测试一条幸福与不幸福的道路。第一个测试应该是在发出错误的发布请求后，找到一个内部带有错误的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>
    );
}

这是我的考验：

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: ""

我曾经尝试过使用模拟，spyOn等...，但没有找到解决方案。

有人可以帮助我吗？谢谢

Answer 1

我在酶方面没有太多经验，但是据我了解，您必须测试内部文本，但是您正在测试HTML元素。使用.test()函数而不是.html()

expect(wrapper.find("#error").text()).toEqual("Error2");

应该工作

测试对带有ajax请求的点击按钮的反应

1 个答案: