如何测试在其 onChange 处理程序上分派操作的受控输入（通过 Redux 状态）？

Question

这是我的组件：

import React, { ChangeEvent } from "react";
import { Input } from "@chakra-ui/react"
import { useDispatch, useSelector } from "react-redux";
import { ACTION } from "../../redux/appSlice";
import { RootState } from "../../redux/store";

interface IAddTodoForm {}

const AddTodoForm: React.FC<IAddTodoForm> = (props) => {

  const dispatch = useDispatch();
  const { addTodoForm } = useSelector((state: RootState) => state.app);
  const { title } = addTodoForm;
  
  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
    const title = e.target.value;
    dispatch(ACTION.UPDATE_TODO_INPUT({title}));
  };

  return(
    <Input 
      value={title} 
      onChange={onChange} 
    />
  );
};

export default React.memo(AddTodoForm);

这是从 onChange 处理程序分派到 Redux 的基本输入。

这是我想测试的：

import { render, screen, fireEvent } from "../../../test/test-utils";
import AddTodoForm from "../AddTodoForm";

beforeEach(() => {
  render(<AddTodoForm/>);      // NOTE: THIS IS A CUSTOM render FUNCTION THAT ALREADY WRAPPED WITH THE <Provider store={store}> FROM react-redux
});

test("AddTodoForm updated input vale", () => {
  const { container } = render(<AddTodoForm/>);
  const input = container.getElementsByTagName("input")[0];
  expect(input).toBeInTheDocument();
  fireEvent.change(input, { target: { value: "NEW TODO" }});

  // HERE I WOULD LIKE TO CHECK IF THE INPUT VALUE HAS BEEN UPDATE
  // HOW CAN I DO THAT

});

如您所见，我想触发一个 change 事件，该事件应该发送到 Redux 存储，然后我想确认输入已使用 NEW TODO 价值。这是正确的做法吗？

Answer 1

您只需像这样使用 expect：

test("AddTodoForm updated input vale", () => {
  const input = screen.getByLabelText("add-todo-input");
  expect(input).toBeInTheDocument();
  fireEvent.change(input, { target: { value: "NEW TODO" }});

  expect(input.value).toBe('NEW TODO')
});

对于异步操作，您可以改用此方法：

await screen.findByText("NEW TODO");

expect(getByText("NEW TODO")).toBeTruthy();

使用 await findByText 等待文本出现。

如何测试在其 onChange 处理程序上分派操作的受控输入（通过 Redux 状态）？

How to test a controlled input (via Redux state) that dispatches an action on its onChange handler?

typescript

reactjs

jestjs

redux

react-testing-library