使用Jest for React模拟Click并拍摄快照

Question

我正在尝试学习如何为前端REACT应用程序创建单元测试。

我要测试的是组件的输出，然后是在单击按钮后相同组件的输出。 （假设有可能）。

我看过enyzme模拟点击的示例，但是我还没有看过使用Jest快照功能的任何示例。我尝试过的是（不起作用）：

import React from 'react';
import TopNav from '../components/navigation/TopNav'
import renderer from 'react-test-renderer';

test('Modal opens when when button clicked', () => {
    const component = renderer.create(
        <TopNav history={null} showSignUp={false} />
    );

    let tree = element.toJSON();
    expect(tree).toMatchSnapshot();

    //manually trigger modal
    let instance = component.getInstance();
    instance.find(".login-button").simulate('click'); //Does not work, find not a function
    // re-rendering
    tree = component.toJSON();
    expect(tree).toMatchSnapshot();
});