在React项目中使用Jest测试点击-路由跳转场景

2023-12-31 17:38:41

简介

在React项目中，我们经常会遇到需要测试点击某个按钮或链接后页面跳转到某个指定路由页面的场景。这种测试场景需要我们模拟用户的点击行为，然后断言页面是否跳转到了正确的路由页面。

测试步骤

首先，我们需要安装Jest和React-Testing-Library。

npm install --save-dev jest react-testing-library

然后，我们需要创建一个测试文件。我们可以在项目根目录创建一个名为test.js的文件。
在test.js文件中，我们需要导入Jest和React-Testing-Library。

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom';

接下来，我们需要创建一个React组件，该组件包含一个按钮和一个路由链接。

const MyComponent = () => {
  return (
    <Router>
      <div>
        <button onClick={() => { window.location.href = '/detail' }}>查看详情</button>
        <Route path="/detail" component={Detail} />
      </div>
    </Router>
  );
};

然后，我们需要在test.js文件中创建一个测试用例。

test('点击按钮后页面应该跳转到详情页', () => {
  const { getByText } = render(<MyComponent />);

  const button = getByText('查看详情');
  fireEvent.click(button);

  expect(window.location.href).toBe('http://localhost:3000/detail');
});