测试我的 react(button) 组件，模拟函数收到 0 次调用

Question

下面是我的脚本：

export interface InputProps {
    value: string;
    onSubmit: (value: string) => void;
    onChange: (value: string) => void;
}

const InputBox: React.FC<InputProps> = (props: InputProps) => {
    return (
        <InputWrapper>
            <InputField
                value={props.value}
                onSubmit={() => {
                    props.onSubmit;
                    console.log('onsubmit function is being called.');
                }}
                onChange={props.onChange}
                button={true}
            />
        </InputWrapper>
    );
};

下面是我的测试：

describe('<InputBox />', () => {
    const onSubmitMock = jest.fn();
    const onChangeMock = jest.fn();

const Test = <InputBox onSubmit={onSubmitMock} onChange={onChangeMock} value="test" />;

it('called onSubmitMock when click submit', () => {
    const { getAllByRole } = render(Test);
    fireEvent.click(getAllByRole('button'));
    expect(onSubmitMock).toHaveBeenCalled();
});

但它给我错误：调用次数：0

但是，我的 onChange 测试通过了：

it('called onChangeMock when click submit', () => {
    const { getAllByRole } = render(Test);
    fireEvent.click(getAllByRole('button'));
    expect(onChangeMock).toHaveBeenCalled();
});

onChange 和 onSubmit 的唯一区别 b/t 是我有一个用于 onSubmit 的箭头函数属性。

问题一，为什么不能像onChangeMock那样调用onSubmitMock？

问题二（已删除）

知道这个吗？非常感谢

Answer 1

您好像忘记调用 onSubmit 回调函数了。只需像这样添加缺少的括号：

  onSubmit={() => {
    props.onSubmit();
  }}

如果不需要 console.log，那么这应该有效：

  onSubmit={props.onSubmit}

Answer 2

Question one, why can't I call the onSubmitMock like the onChangeMock?

要调用函数，必须有人调用它。如果你写的代码 props.onChange 没有括号，那么你只是在引用一个函数，而不是调用它。所以对于 props.onSubmit; 和 onChange={props.onChange}，函数都不会被调用。反正不在这行代码上...

但是 onChange prop 被设计成如果你将一个函数的引用传递给它，然后反应保证它会为你调用函数，如果和当变化事件发生时。所以稍后当事件发生时，反应会为你调用 props.onChange。

使用onSubmit函数，你还传递了一个函数给它：你写的匿名箭头函数，who's text is:

() => {
  props.onSubmit;
  console.log('onsubmit function is being called.');
}

当事件发生时，react 将调用该函数。在您的自定义函数中，您可以做任何您喜欢的事情，包括调用 props.onSubmit。但是你会自己调用它，而不是让 React（或其他任何东西）为你调用它，所以你需要自己调用它 props.onSubmit()

Question two [...]

我不清楚是什么代码导致了类型错误。如果您显示导致错误的代码，我将编辑此问题以回答该问题

测试我的 react(button) 组件，模拟函数收到 0 次调用

Test my react(button) component, mock function received 0 calls

unit-testing

typescript

reactjs

jestjs

react-testing-library