如何模拟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();
});

它是为反应测试库而不是酶，但它应该更容易适应。

和相关的测试，当值并没有被编程更改时，回调在500ms后被调用。

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");
});