MSW实战

今天我们来实战一个msw的使用，首先我们先随意建立一个component，我是建立一个Users component．

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

type UserType = {
  name: string;
  city: string;
};

const Users = () => {
  const [users, setUsers] = useState<UserType[]>([]);

  useEffect(() => {
    const getUsers = async () => {
      const userList = await axios.get('http://localhost:5000/users');
      const { data } = userList;

      if (data) {
        setUsers(data);
      }
    };

    getUsers();
  }, []);

  return (
    <>
      {users.length > 0
        ? users.map((user) => {
            return (
              <div key={user.name} role="user">
                {user.name}
              </div>
            );
          })
        : null}
    </>
  );
};

export default Users;

上面这一段程序是建立一个users的列表，一开始状态设为空阵列，当我们透过axios去拉取server的资料，取得资料时users会列印出来，我们在昨天有时做一个handlers所以我们透过axios抓取资料时我们的msw会拦截并回传一个内含三笔资料的array

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

describe('<Users />', () => {
  test('should get three lines user data', async () => {
    render(<Users />);

    const users = await screen.findAllByRole('user');
    expect(users).toHaveLength(3);
  });
});

我们这个就可以取得三笔资料