时间戳

首页 > 解决方案 > Jest/react-testing-library：单击按钮未更新测试中的值

javascript - Jest/react-testing-library：单击按钮未更新测试中的值

问题描述

最初的问题

我有一个简单的增量/减量组件。

它显示一个数字计数和 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已连接。

问题：为什么没有使用更新的输入值？

附加信息：虽然我不确定，但我认为它可能没有更新useStateon 更改，所以我还添加了一个键盘事件以在我更改其值后点击输入上的 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);
  })
})

标签： javascriptreactjsjestjsreact-testing-library

解决方案

您的类型属性中有错字。改变这个

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

对此

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

并且测试将再次起作用。我的猜测是，通过指定<input>无效type属性，库不知道您是哪个角色input，因此它无法onchange正确处理事件。

我不确定为什么要更新到新版本，react-scripts并且@testing-library/react即使您将错字留在那里，也会解决问题。

推荐阅读