将测试库反应到HaveBeenCalledTimes 复选框测试失败

Question

我开始使用 Jest 和 react-testing-library 创建单元测试 我不确定为什么会失败：

Component:

const CheckboxInput: React.FC<Props> = ({ id, color, height, width, border, isChecked, handleChange 
     }) => {
       return(
           <input aria-label="checkbox-input" type="checkbox" checked={isChecked} onChange={(e) 
                   =>handleChange(id, e)} />
       )
   }

测试：

describe('Test CheckboxInput component', () => {
afterEach(cleanup);
const handleChangeMock = jest.fn();
const setup = () => {
    const utils = render(
        <CheckboxInput
            id={1}
            color={'#000'}
            height={'15px'}
            width={'15px'}
            border={'1px solid #000'}
            isChecked={false}
            handleChange={handleChangeMock}
        />,
    );
    const input = utils.getByLabelText('checkbox-input') as HTMLInputElement;
    return {
        input,
        ...utils,
    };
};
test('CheckboxInput initial value ', () => {
    const { input } = setup();
    expect(input.checked).toBe(false);

    fireEvent.change(input, { target: { checked: true } });

    expect(input.checked).toBe(true);
    expect(handleChangeMock).toHaveBeenCalledTimes(1);
   });
});

在 toHaveBeenCalledTimes 上失败

任何见解将不胜感激

Answer 1

你应该模拟复选框选中事件

 fireEvent.click(input);

此外，由于您是单独测试组件，这将失败，因为您的 isChecked 始终是 false 。所以请删除这个

 expect(input.checked).toBe(true);

将test 块更改为此

 test('CheckboxInput initial value ', () => {
    const {input} = setup();
    expect(input.checked).toBe(false);

    fireEvent.click(input);

    expect(handleChangeMock).toHaveBeenCalledTimes(1);
    expect(handleChangeMock).toHaveBeenCalledWith(1, true);
  });

工作示例 - Code Sandbox