使用 Jest Mock Ajax

Posted 2021-06-01 玩转React

如何 Mock Ajax Request

我们经常会遇到在组件中调用 api 获取数据的情况。此类组件在测试时应该对 ajax 请求方法进行 Mock， 才能保证测试的稳定性，也让测试易于编写。本文以 axios 作为示例。

组件示例

import React, {useEffect, useState} from 'react';
import axios from 'axios';

export interface User {
  id: string;
  name: string;
}

export const Demo = () => {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    axios.get<User[]>('./users').then((response) => setUsers(response.data));
  }, [setUsers]);

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

import React from 'react';

import {render, screen} from '@testing-library/react';
import { Demo } from './Demo';

describe('Demo', () => {
  it('renders the correct number of list items', async () => {
    render(<Demo />);
    const listItems = await screen.findAllByRole('listitem');

    // 我们不确定接口会返回几条数据，再者，数据是可能发生变化的。
    expect(listItems).toHaveLength(/*??*/)
  })
});

分析

1.我们无法知道接口会返回多少个 user。2.我们可以知道返回多少个 user, 但是这不是一成不变的。当数据库中的数据变化时，会导致测试失败。3.是否可以通过对 AJAX 请求的 MOCK，来保证组件的正确性和测试的稳定性?

解决方案

import React from 'react';

import {render, screen} from '@testing-library/react';
import { Demo } from './Demo';

import axios from 'axios';

jest.mock('axios');

const mockUsers = [
  {id: '1', name: 'john'},
  {id: '2', name: 'Lucy'},
  {id: '3', name: 'Tom'}
];

describe('Demo', () => {
  it('renders the correct number of list items', async () => {
    (axios.get as jest.MockedFunction<typeof axios.get>).mockImplementation(() => Promise.resolve({data: mockUsers}));
    render(<Demo />);
    const listItems = await screen.findAllByRole('listitem');

    // MOCK 数据有3条，我们期望组件渲染了三个用户。
    expect(listItems).toHaveLength(3);
  })
})

合理的使用 mock, 编写简单而稳定的测试。