前端单测学习（7）—— 实践引入 mock 场景的单测

2024-01-16 14:57:26

前言

在之前的文章中，我们介绍了如何针对组件进行单测，包括如何mock依赖项、如何使用断言等。在这篇文章中，我们将介绍如何针对一个实际的项目引入mock场景的单测。

引入第三方包

首先，我们需要引入一个第三方包来帮助我们进行mock。我们这里使用Jest的mock函数来模拟我们需要的依赖项。

npm install --save-dev jest

然后，我们在项目中创建一个新的文件，例如test.js，并在其中引入Jest的mock函数。

const mock = require('jest-mock');

增加路由

接下来，我们需要在项目中增加一个路由，以便我们可以测试我们的组件。在我们的例子中，我们增加了一个/user路由，它将显示一个用户列表。

// src/routes.js
import React from 'react';
import { Route, Switch } from 'react-router-dom';

import UserList from './components/UserList';

const Routes = () => (
  <Switch>
    <Route path="/user" component={UserList} />
  </Switch>
);

export default Routes;

新增组件和单测

现在，我们可以开始新增我们的组件和单测了。首先，我们创建一个新的组件，例如UserList.js，它将显示一个用户列表。

// src/components/UserList.js
import React, { useEffect, useState } from 'react';

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data))
      .catch(err => console.error(err));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

然后，我们创建一个新的单测文件，例如UserList.test.js，并在其中测试我们的组件。

// src/components/UserList.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import UserList from './UserList';

jest.mock('react-router-dom', () => ({
  useLocation: () => ({
    pathname: '/user',
  }),
}));

const mockFetch = jest.fn().mockImplementation(() => Promise.resolve({
  json: () => Promise.resolve([
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' },
  ]),
}));

global.fetch = mockFetch;

describe('UserList', () => {
  it('should render a list of users', async () => {
    const { getByText } = render(<UserList />);

    await waitFor(() => {
      expect(getByText('John Doe')).toBeInTheDocument();
      expect(getByText('Jane Doe')).toBeInTheDocument();
    });
  });
});

在上面的单测中，我们使用了Jest的mock函数来模拟fetch函数。这使得我们可以在单测中控制fetch函数的返回值，而不需要実際に发送请求。

运行单测

现在，我们可以运行我们的单测了。在终端中执行以下命令：

npm test

如果单测通过，你将看到以下输出：

 PASS  src/components/UserList.test.js
  ✓ should render a list of users (147ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.634s
Ran all test suites.