reactjs - 传递给子组件的 React 测试函数

Question

我有一个带有父组件的简单 React 应用程序，该组件具有进行 xhr 调用的功能。这个函数被传递给一个子组件，它的工作是从用户那里收集一些信息，然后在提交按钮上调用 prop 处理程序。然后调用父函数中的函数。一切都很好，为我工作。

我已经对 child 进行了测试，以确保单击按钮会触发处理程序。效果很好。

现在我想测试 Parent 中的实际处理程序代码。我怎样才能做到这一点？我在 Parent 中没有可以触发的事件，它发生在 child 中。

• Parent(submitHandler函数和另一个处理点击事件的函数[这是我要测试的])将submitHandler传递给Child
• 子级(其点击事件触发父级中的 submitHandler 的按钮)

我没有很好地解释，我知道这一点。我正在使用@testing-library/react 和 jest。

我真的只是想测试恰好位于该组件内部的 js 代码。我看到的一个建议是从组件中提取此功能，将其导出，然后以这种方式进行测试。但是这段代码修改了父组件状态，所以我不知道如何将其抽象出来。

抱歉，我的代码很少:

  describe('Testing Parent Component', () => {
      const setup = () => {
        render(<Parent />);
      };
    
      test('child click event fires', async () => {
        // here I want to mock the child firing the Parent's handler function

      });
    });

这是一些伪父组件代码:

import React, { useEffect } from 'react';
import Child from './child';

const Parent = () => {
  const [queueStatus, setQueueStatus] = React.useState([]);
  const [data, setData] = React.useState(true);

  useEffect(() => {
    fetchStatus();
  }, []);

  const fetchStatus = async () => {
    setIsFetching(true);
    // get some data
    setIsFetching(false);
    setData(fetchedData);
  };

  // I want to test this 
  const submitHandler = async (childprop1) => {
    // do something else but then refresh
    fetchStatus();
  };

  return (
      <Child submitHandler={submitHandler} />
  );
};

export default Parent;

Answer 1

我一直在研究类似的东西。

使用 react-testing-library 可以这样。

it("sets up active directory", async () => {
         const user = userEvent.setup();

         renderWithProviders(<DirectoriesList />);
         const button = await screen.findByRole("button", { name: /dir1/i });

         const subItem = screen.queryByText(/dir2/i);
         expect(subItem).not.toBeVisible();

         
         
         /* it clicks subcomponent, which changes parent state */
       
         await user.click(button);
       
         const subItemShowed = screen.getByText(/dir2/i);
         expect(subItemShowed).toBeVisible();
  });