使用 Typescript 進行反應測試

Question

我在使用 Typescript 在 React 中進行測試時遇到了一些問題。我正在學習 React.js 中的教程並且是 Typescript 的新手，所以我不確定如何刪除一些錯誤。

應用程序.ts

import { useState } from "react";
import validator from "validator";

interface signupInput {
    email: string;
    password: string;
    confirmPassword: string;
}

function App() {
    const [signupInput, setSignupInput] = useState<signupInput>({
        email: "",
        password: "",
        confirmPassword: "",
    });

    const [error, setError] = useState<string>("");

    const handleChange = (e: any) => {
        setSignupInput({
            ...signupInput,
            [e.target.name]: e.target.value,
        });
    };

    const handleClick = (e: any) => {
        e.preventDefault();
        if (!validator.isEmail(signupInput.email)) {
            return setError("the email you input is invalid");
        } else if (signupInput.password.length < 5) {
            return setError("your password needs 5 or more characters");
        } else if (signupInput.password !== signupInput.confirmPassword) {
            return setError("your passwords do not match");
        } else {
            return setError("");
        }
    };

    return (
        <div className="container my-5">
            <form>
                <div className="mb-3">
                    <label htmlFor="email" className="form-label">
                        Email Address
                    </label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        className="form-control"
                        value={signupInput.email}
                        onChange={handleChange}
                    />
                </div>
                <div className="mb-3">
                    <label htmlFor="password" className="form-label">
                        Password
                    </label>
                    <input
                        type="password"
                        id="password"
                        name="password"
                        className="form-control"
                        value={signupInput.password}
                        onChange={handleChange}
                    />
                </div>
                <div className="mb-3">
                    <label htmlFor="confirm-password" className="form-label">
                        Confirm Password
                    </label>
                    <input
                        type="password"
                        id="confirm-password"
                        name="confirmPassword"
                        className="form-control"
                        value={signupInput.confirmPassword}
                        onChange={handleChange}
                    />
                </div>
                {error && <p className="text-danger">{error}</p>}
                <button type="submit" className="btn btn-primary" onClick={handleClick}>
                    Submit
                </button>
            </form>
        </div>
    );
}

export default App;

我覺得我需要將我的界面注冊傳遞到我已經完成的測試文件，它已經刪除了很多紅線但不確定我是否正確完成了。

應用程序測試.tsx

import { render, screen } from "@testing-library/react";
import App from "./App";
import "@testing-library/jest-dom/extend-expect";
import userEvent from "@testing-library/user-event";

interface signupInput {
    email: string;
    password: string;
    confirmPassword: string;
}

beforeEach(() => {
    // eslint-disable-next-line testing-library/no-render-in-setup
    render(<App />);
});

const typeIntoForm = ({ email, password, confirmPassword }: signupInput) => {
    const emailInputElement = screen.getByRole<HTMLInputElement>("textbox", {
        name: /email/i,
    });
    const passwordInputElement =
        screen.getByLabelText<HTMLInputElement>("Password");
    const confirmPasswordInputElement =
        screen.getByLabelText<HTMLInputElement>(/confirm password/i);
    if (email) {
        userEvent.type(emailInputElement, email);
    }
    if (password) {
        userEvent.type(passwordInputElement, password);
    }
    if (confirmPassword) {
        userEvent.type(confirmPasswordInputElement, confirmPassword);
    }
    return {
        emailInputElement,
        passwordInputElement,
        confirmPasswordInputElement,
    };
};

我正在嘗試清理我的代碼。 我不確定我是否已正確通過接口以及是否在我的測試中：

test("should be able to type an email", () => {
    const { emailInputElement } = typeIntoForm({
        email: "selena@gmail.com",
        password: "",
        confirmPassword: "",
    });
    expect(emailInputElement.value).toBe("selena@gmail.com");
});

如果我刪除：

password: "",
            confirmPassword: "",

從 const { emailInputElement } 我得到一個錯誤：

Argument of type '{ email: string; }' is not assignable to parameter of type 'signupInput'.
  Type '{ email: string; }' is missing the following properties from type 'signupInput': password, confirmPasswordts(2345)

我可以更改什么，所以我只能提及不是空字符串的 email？

另外，如果 Typescript 中有任何好的測試文檔。

Answer 1

您可以嘗試修改 typeIntoForm function 的類型，如下所示：

interface SignupInput {
    email?: string;
    password?: string;
    confirmPassword?: string;
}

const typeIntoForm = (input: SignupInput) => {

或者：

const typeIntoForm = (Partial<SignupInput>: signupInput) => {

https://www.typescriptlang.org/docs/handbook/utility-types.html

https://www.typescriptlang.org/docs/handbook/2/functions.html#optional-parameters

我建議你利用你的類型和接口。