我开始使用 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);
});
});
任何见解将不胜感激
答案 0 :(得分:-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