Jest/react-testing-library：單擊按鈕未更新測試中的值

Question

初始問題

我有一個簡單的遞增/遞減組件。

它顯示一個數字計數和 2 個按 1 遞增或遞減的按鈕。

還有一個輸入； 如果輸入中提供了數值，則按鈕使用輸入值而不是 1 來增加/減少。

我有這個測試：

it(`should increment by input value, if value > 0`, () => {
  const { input } = setup();

  // Change input value to 4
  fireEvent.change(input, {target: { value: 4}});

  // Find and click +n button
  const btn = screen.getByText(`+n`);
  fireEvent.click(btn);

  // Find and check updated count
  const updatedCount = parseInt(screen.getByTestId(`count`).textContent, 10)
  expect(updatedCount).toBe(4);
})

問題：此處更新的計數返回 1（ useState默認值），我預計為 4。

expect(parseInt(input.value, 10)).toBe(4)通過並且輸入onChange被連接起來。

問題：為什么不使用更新的輸入值？

附加信息：雖然我不確定，但我認為它可能沒有在更改時更新useState ，所以我還添加了一個鍵盤事件以在更改其值后按下輸入上的 Enter 鍵。 我希望進一步模擬用戶並更新狀態，但我對此並不走運。

非常感謝任何幫助！ 為任何不合適的地方道歉，我最近幾天只在看 Jest/RTL。

---

---

回復信息

測試組件：

import React, { useState } from "react";

const MyTest = () => {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState(1);

  const incCount = (n) => {
    if (n !== 0) {
      count + n <= 10 && setCount((currCount) => currCount + n);
      return;
    }

    if (count < 10) setCount((currCount) => currCount + 1);
  };
  const decCount = (n) => {
    if (n !== 0) {
      count - n >= 0 && setCount((currCount) => currCount - n);
      return;
    }

    if (count > 0) {
      setCount((currCount) => currCount - 1);
    }
  };

  return (
    <>
      <div>value: {value}</div>
      <div data-testid="count">{count}</div>

      <br />

      <label htmlFor="inp">N Input</label>
      <br />
      <input
        type="texts"
        placeholder="inc or dec by num"
        id="inp"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <br />
      <button type="button" onClick={() => decCount(parseInt(value))}>
        -n
      </button>
      <button type="button" onClick={() => incCount(parseInt(value))}>
        +n
      </button>
    </>
  );
};

export default MyTest;

測試：

import React from 'react';
import {screen, fireEvent, render, cleanup, waitFor} from '@testing-library/react';
import "@testing-library/jest-dom/extend-expect";
import MyTest from './myTest';

describe(`Increment and decrement the count when relevant button is pressed`, () => {
  // Get component
  const setup = () => {
    const utils = render(<MyTest />)
    const initCount = parseInt(screen.getByTestId(`count`).textContent, 10)
    const input = screen.getByLabelText(`N Input`);
    return {
      initCount,
      input,
      ...utils
    }
  };

  // ...other tests here

  it(`should increment by input value, if value > 0`, () => {
    const { input } = setup();

    // Change input value to 4
    fireEvent.change(input, {target: { value: 4}});

    // Find and click +n button
    const btn = screen.getByText(`+n`);
    fireEvent.click(btn);

    // Find and check updated count
    const updatedCount = parseInt(screen.getByTestId(`count`).textContent, 10)
    expect(updatedCount).toBe(4);
  })
})

Answer 1

您的 type 屬性有錯別字。 改變這個

<input type="texts" {...} />

對此

<input type="text" {...} />

並且測試將再次起作用。 我的猜測是，通過指定<input>一個無效的type屬性，庫不知道您的input是哪個角色，因此它無法正確處理onchange事件。

我不知道為什么更新到新版本的react-scripts和@testing-library/react會解決這個問題，即使你把錯字留在那里。