reactjs - 在 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 无法找到您搜索的角色，它会告诉您哪些角色在 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()
})