在 React 测试库中测试点击事件

Question

这是一个简单的子组件，当单击按钮时，它会向问题显示answer：

const Question = ({ question, answer }) => {
    const [showAnswer, setShowAnswer] = useState(false)
    return (
        <>
           <article>
               <header>
                    <h2 data-testid="question">{question}</h2>
                    <button onClick={() => setShowAnswer(!showAnswer)}>
                        {
                            !showAnswer ? <FiPlusCircle /> : <FiMinusCircle />
                        }
                    </button>
               </header>
               {
                   showAnswer && <p data-testid="answer">{answer}</p>
               }
           </article>
        </>
    )
}

export default Question;

我正在尝试测试当点击button 时，附加的onClick 会被调用一次，并且屏幕上会出现<p> 元素：

const onClick = jest.fn()

test('clicking the button toggles an answer on/off', () => {
    render(<Question />);
    
    const button = screen.getByRole('button')
    fireEvent.click(button)
    
    expect(onClick).toHaveBeenCalledTimes(1);
    
    expect(screen.getByTestId('answer')).toBeInTheDocument()
    
    fireEvent.click(button)

    expect(screen.getByTestId('answer')).not.toBeInTheDocument()

    screen.debug()
    
})

RTL 表示根本不调用 onClick（在 UI 中它是，因为结果符合预期）

另外，如果我想测试这个按钮是否真的切换了answer 元素（消息应该打开和关闭），我将如何测试？

如果我在测试中添加另一个fireEvent.click()（模拟第二次点击应该触发answer元素关闭的按钮），然后添加

expect(screen.getByTestId('answer')).not.toBeInTheDocument()

RTL 将无法找到该元素（我猜这很好，这意味着它已经真正关闭了 DOM）。对于这种情况，您会使用什么断言来通过此测试？

Answer 1

您的方法存在一些问题。

首先，像这样创建 onClick 模拟不会模拟按钮的 onClick 回调。回调是组件内部的，您无法从测试中访问它。你可以做的是测试触发onClick 事件的结果，在这种情况下，这意味着验证<FiMinusCircle /> 被呈现而不是<FiPlusCircle />。

其次，p 不是有效角色 - 如果 RTL 找不到您搜索的角色，则 RTL 会告诉您 DOM 中哪些角色可用。 paragraph 元素没有固有的可访问性角色，因此最好使用 getByText 通过其内容访问它。

这是测试的更新版本：

test('clicking the button toggles an answer on/off', () => {
    render(<Question question="Is RTL great?" answer="Yes, it is." />);
    const button = screen.getByRole('button')
    
    fireEvent.click(button)
    // Here you'd want to test if `<FiMinusCircle />` is rendered.
    expect(/* something from FiMinusCircle */).toBeInTheDocument()
    expect(screen.getByText('Yes, it is.')).toBeInTheDocument()
    
    fireEvent.click(button)
    // Here you'd want to test if `<FiPlusCircle />` is rendered.
    expect(/* something from FiPlusCircle */).toBeInTheDocument();
    expect(screen.queryByText('Yes, it is.')).not.toBeInTheDocument()
})

Answer 2

在我的情况下，这有效：

it('Does click event', () => {
    const { container } = render(<Component />);

    fireEvent.click(container.querySelector('.your-btn-classname'));

    // click evt was triggered
});