web-dev-qa-db-ja.com

エラー：React

私はテストのニュースです、これは私の問題です

その単純なログインコンポーネントがあります。

import React, { useState } from "react";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  function handleLogin(event) {
    event.preventDefault();
    console.log(email, password);
  }

  return (
    <form data-testid="login-form" onSubmit={handleLogin}>
      <input
        data-testid="useremail"
        type="email"
        placeholder="Email"
        value={email}
        onChange={event => setEmail(event.target.value)}
      />

      <input
        data-testid="userpassword"
        type="password"
        placeholder="Password"
        value={password}
        onChange={event => setPassword(event.target.value)}
      />
      <button onClick={handleLogin}>login</button>
    </form>
  );
}

私はここで私のテストを試みます：

import React from "react";
import Login from "../pages/Login";

import { render, fireEvent } from "@testing-library/react";

describe("Login component", () => {
  it("user sent email and password", () => {
    const username = "[email protected]";
    const password = "123456";

    let { getByText, getByTestId } = render(<Login />);

    fireEvent.change(getByTestId("useremail"), {
      target: { value: username }
    });

    fireEvent.change(getByTestId("userpassword"), {
      target: { value: password }
    });

    fireEvent.submit(getByTestId("login-form"));

    expect(getByTestId("login-form")).toContainElement(
      getByText(username, password)
    );
  });
});

返されるエラー：text：[email protected]の要素を見つけることができません。これは、テキストが複数の要素によって分割されているためである可能性があります。この場合、テキストマッチャーに関数を提供できますマッチャーをより柔軟にするためです。

reactjstestingjestjstddreact-testing-library
3
Henrique

getByTextの外観 テキストコンテンツによる 。 value属性はテキストコンテンツではなく、属性の1つです。したがって、このアプローチでは入力が見つかりません。

また、主張しようとしているもので検索するのは、慣用的ではありません。静的プロパティで要素を見つけ、動的な値を確認することをお勧めします。

expect(getByTestId("useremail").value).toEqual("[email protected]");

PSより「RTLアプローチ」になるには、getByPlaceholderTextではなくgetByTestIdを使用することもお勧めします。

3
skyboyer