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);
  });
});

我們這個就可以取得三筆資料