onChange 事件不会在简单的单元测试中触发

Question

我写了一个非常简单的单元测试，但是 handleChange 函数没有被调用。

import React from 'react';
import { fireEvent, render } from '@testing-library/react';

describe('Component', () => {
    test('demo', (done) => {
        const handleChange = jest.fn();
        const {getByRole} = render(
            <input role="slider" type="range" onChange={({currentTarget}) => handleChange(currentTarget.value)}/>
        );
        fireEvent.change(getByRole('slider'), {currentTarget: {value: 10}});
        expect(handleChange).toHaveBeenCalledWith(10);
        done();
    });
})

知道我做错了什么吗？

Answer 1

fireEvent.change的第二个参数与事件处理程序的事件参数无关。它只有特定的关键字， currentTarget 不存在。相反，您应该使用 target，这将适用于事件的 target 和 currentTarget 属性：

fireEvent.change(getByRole('slider'), { target: { value: 10 } });

onChange 事件不会在简单的单元测试中触发

onChange event is not fire in simple unit test

jestjs

react-testing-library