开玩笑如何从作为道具传递给子组件的父组件调用 function

Question

const Parent = () => {
  const [page, setPage] = useState(1);
  const handleSetPage = () => {
    setPage(2);
  };
  return (
    <div>
      {page === 1 && <ChildPage1 handleSetPage={handleSetPage} /> }
      {page === 2 && <ChildPage2  /> }
    </div>
  )
}

const ChildPage1 = ({handleSetPage}) => {
  return (
    <button onClick={handleSetPage}>Next page</button>
  )
}


it('Continues to next page on button click', () =>  {
  render(<CreateDuty />);
  fireEvent.click(screen.getByText('Next page'));
  expect('Page 2 text').toBeInTheDocument();
});

我试图测试单击按钮时页面是否发生变化，但在测试中没有调用 handleSetPage()。

我如何传递/包装/模拟 function 以便它被调用？

Answer 1

首先，用户事件是异步的，这意味着您需要将测试 function 包装在异步 function 中并await用户事件。

import React, { useState } from 'react'
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

const Parent = () => {
    const [page, setPage] = useState(1);
    const handleSetPage = () => {
        setPage(2);
    };
    return (
        <div>
            {page === 1 && <ChildPage1 handleSetPage={handleSetPage} />}
            {page === 2 && <ChildPage2 />}
        </div>
    )
}

const ChildPage1 = ({ handleSetPage }) => {
    return (
        <button onClick={handleSetPage}>Next page</button>
    )
}

const ChildPage2 = () => {
    return (
        <div>Page 2 text</div>
    )
}

it('Continues to next page on button click', async () => {
    render(<Parent />);
    const button = screen.getByRole('button');
    userEvent.click(button);
    const page2Text = await screen.findByText('Page 2 text');
    expect(page2Text).toBeInTheDocument();
});

其次，您需要找到您正在寻找并期待它的元素。 如果你期望一个字符串，你会得到这个错误：

received value must be an HTMLElement or an SVGElement.
Received has type:  string
Received has value: "Page 2 text"

在本例中，我按角色获取按钮，因为屏幕上只有一个按钮。 在实际示例中，您可以将id提供给要测试的组件，并使用该 id 获取所需的组件。