如何在 Input 组件上模拟不同的值和 ref.current.value

Question

祝大家好日子：

我正在尝试为以下组件编写开玩笑的测试用例，但无法弄清楚如何为“if (value === valueRef.current.value)”行编写测试。 如何模拟一个与参考当前值不同的值？

谢谢你。

  const Input = ({
      setEnteredValueHandler
    }) => {
      const [value, setValue] = useState(defValue);
      const valueRef = useRef();
    
      useEffect(() => {
        const timer = setTimeout(() => {
          if (value === valueRef.current.value) {
            setEnteredValueHandler(value);
          }
        }, 500);
        return () => {
          clearTimeout(timer);
        };
      }, [value]);
    
      return (
            <input
              value={value}
              ref={valueRef}
              onChange={e => setValue(e)}
            />
      );
    };
    
    
    export default Input;

Answer 1

到目前为止，您的组件存在逻辑错误： value={value} onChange={e => setValue(e)} 。 它将Event设置为value 。 我相信它应该是onChange={e => setValue(e.target.value)} 。

接下来关于组件。 到目前为止，获得value和valueRef.current.value不同的唯一方法是以编程方式更改后者。 任何其他交互（按键或输入）将调用onChange句柄并将value设置为valueRef.current.value 。

我们还需要模拟计时器来避免等待真正的 500 毫秒。

test('does not call callback if value has been changed programmatically during 500ms', () => {
    jest.useFakeTimers();
    const setEnteredValueHandler = jest.fn();
    const { getByRole } = render(<Input setEnteredValueHandler={setEnteredValueHandler} />);
    const input = getByRole('textbox');
    fireEvent.change(input, { target: { value: "aaa" } });
    input.value = "aa";
    expect(setEnteredValueHandler).not.toHaveBeenCalled();
    jest.advanceTimersByTime(502);
    expect(setEnteredValueHandler).not.toHaveBeenCalled();
});

它用于 React-Testing-Library 而不是 Enzyme，但它应该更容易适应。

以及当值没有以编程方式更改的情况下的相关测试，因此在 500 毫秒后调用回调。

test('calls callback if value has not been changed programmatically during 500ms', () => {
  jest.useFakeTimers();
  const setEnteredValueHandler = jest.fn();
  const { getByRole } = render(<Input setEnteredValueHandler={setEnteredValueHandler} />);
  const input = getByRole('textbox');
  fireEvent.change(input, { target: { value: "aaa" } });
  expect(setEnteredValueHandler).not.toHaveBeenCalled();
  jest.advanceTimersByTime(499);
  expect(setEnteredValueHandler).not.toHaveBeenCalled();
  jest.advanceTimersByTime(2);
  expect(setEnteredValueHandler).toHaveBeenCalledWith("aaa");
});