Нажмите кнопку Test test с запросом ajax - PullRequest
Новая
       5

Нажмите кнопку Test test с запросом ajax

1 голос
/ 24 января 2020

Я пытаюсь протестировать простой компонент входа в систему, где я хочу заполнить адрес электронной почты и пароль и нажать кнопку, чтобы войти в систему. Когда я нажимаю кнопку входа в систему, он создает с помощью ios 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: ""

Я пробовал с mocks, spyOn et c ... но я не нашел решения.

Может кто-нибудь мне помочь? Спасибо

1 Ответ

0 голосов
/ 24 января 2020

У меня нет большого опыта работы с ферментом, но из того, что я могу понять, вы должны проверить внутренний текст, но вы тестируете элемент HTML. Используйте функцию .test() вместо .html()

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

должно работать

...