我如何测试这个？

Question

我是 Jest 和 react-testing-library 的新手，所以希望这个问题的解决方案很简单。

测试通过 'onChange' 属性返回的值的正确方法是什么？

    describe("Component.js", () => {
        test("return correct data", () => {
            render(
                <Component
                    onChange={(value) => console.log(value)}
                />
            );
        });
    });

我想为 'value' 做这样的事情。

expect(value).toBe(50);

为了简单起见，假设 Component.js 看起来像这样。

const Component = ({onChange}) => {
   return (
      <button onClick={() => onChange(50)}></button>
   )
}

Answer 1

您可以尝试类似的方法：

const Component = ({onChange}) => {
    return (
        <button onClick={() => onChange(50)}>CustomButton</button>
    )
}

describe("Component.js", () => {
    test("return correct data", () => {
        const onChangeHandler = jest.fn();
        render(
            <Component onChange={onChangeHandler} />
        );
        fireEvent.click(
           screen.getbyText(/CustomButton/)
        );
        expect(onChangeHandler).toBeCalledWith(50);
    });
});

以上内容可能需要修改才能适用于您的用例。

Answer 2

只需向组件传递一个模拟函数并测试它是否在按钮更改时被调用（尽管我假设您将对按钮使用 onClick）。您可能还需要添加一个 testId 或某种方式来定位组件中的按钮。

describe("Component.js", () => {
  test("return correct data", () => {
  const spy = jest.fn();
    render(
      <Component
        onChange={spy}
      />
    );
    fireEvent.change(screen.getByTestId('button'));
    expect(spy).toHaveBeenCalledWith(50);
  });
});

和组件

const Component = ({onChange}) => {
  return (
    <button 
      data-testid = 'button' 
      onClick={() => onChange(50)}></button>
  )
}

我如何测试这个？

How do I test this?

reactjs

jestjs

react-testing-library