Reactjs 反应测试库：测试onClick事件

我的测试不是100%覆盖，因为我没有测试onClick事件按钮。如何在react测试库中实现？请注意，我在这里使用连接的react路由器，我不知道如何在测试中编写它。如果我在代码中犯了任何错误，我很抱歉，但我仍在学习测试

index.js：

import React from 'react';
import { useDispatch } from 'react-redux';
import { push } from 'connected-react-router';
import {
  StyledFooter,
  StyledButton,
} from './Footer.style';


export default function Footer() {
  const dispatch = useDispatch();

  return (
    <StyledFooter>
      <div>
        <StyledButton type="link" onClick={() => dispatch(push('/test'))}>
          test
        </StyledButton>
      </div>
    </StyledFooter>
  );
}

---

首先，你应该得到你想要点击的元素。为此，您可以使用

getByText

函数

import { render, fireEvent } from '@testing-library/react'

const { container, getByText } = render(
      <Provider store={store}>
        <IntlProvider locale={DEFAULT_LOCALE}>
          <Footer />
        </IntlProvider>
      </Provider>,
    );

const button = getByText("test");

---

然后，您可以对结果进行断言。

首先，您应该获得要单击的元素。为此，您可以使用

getByText

函数

import { render, fireEvent } from '@testing-library/react'

const { container, getByText } = render(
      <Provider store={store}>
        <IntlProvider locale={DEFAULT_LOCALE}>
          <Footer />
        </IntlProvider>
      </Provider>,
    );

const button = getByText("test");

然后您可以对结果进行断言

import { render, fireEvent } from '@testing-library/react'

const { container, getByText } = render(
      <Provider store={store}>
        <IntlProvider locale={DEFAULT_LOCALE}>
          <Footer />
        </IntlProvider>
      </Provider>,
    );

const button = getByText("test");

fireEvent.click(button)