Mock Service Worker-Expected 响应解析器返回模拟响应对象但未定义。 将改为使用原始响应

Question

React Testing Using Mock service worker is returning undefined and then taking values from the actual API. As you can see from the image down below the test is getting passed by getting values from the actual API and the name ARLO WANG is getting pulled out. Where as the name I have kept in the mockResponse is "first last" in the handler.js file.

FollowersList.js

import React, { useEffect, useState } from 'react'
import "./FollowersList.css"
import axios from "axios"
import { Link } from 'react-router-dom';
import { v4 } from 'uuid';

export default function FollowersList() {

    const [followers, setFollowers] = useState([]);

    useEffect(() => {
        fetchFollowers()
    }, []);

    const fetchFollowers = async () => {
        const {data} = await axios.get("https://randomuser.me/api/?results=5")
        setFollowers(data.results)
    }
    // console.log(followers)

    return (
        <div className="followerslist-container">
            <div>
                {followers.map((follower, index) => (
                    <div className="follower-item" key={v4()} data-testid={`follower-item-${index}`}>
                        <div className="followers-details">
                            <div className="follower-item-name">
                                <h4>{follower.name.first}</h4> <h4>{follower.name.last}</h4>
                            </div>
                            <p>{follower.login.username}</p>
                        </div>
                    </div>
                ))}
            </div>
            <div className="todo-footer">
                <Link to="/">Go Back</Link>
            </div>
        </div>
    )
}

FollowersList.test.js

import { render, screen } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import FollowersList from "../FollowersList";


const MockFollowersList = () => {
  return (
    <BrowserRouter>
      <FollowersList />
    </BrowserRouter>
  );
};

describe("FollowersList Component", () => {
  test("renders first follower", async () => {
    render(<MockFollowersList />);
    screen.debug()
    expect(await screen.findByTestId("follower-item-0")).toBeInTheDocument();
  });
});

src/mock/handler.js

import { rest } from 'msw';

const mockResponse = {
  data: {
    results: [
      {
        name: {
          first: "first",
          last: "last",
        },
        login: {
          username: "x",
        },
      },
    ],
  },
};

export const handlers = [
  rest.get('https://randomuser.me/api/', (req, res, ctx) => {
    return res(ctx.json({mockResponse}))
    }
  })
]

VSCODE terminal

Something is going wrong in the return line in handlers array in the handler file. It's not sending back the mockResponse correctly.

Answer 1

Found the mistake. The response structure returned by the actual API and the msw is different. Just had to remove the 'data' object in the mockResponse and keep the it just as an array of 'results'.

import { rest } from 'msw';

const mockResponse = {
  results: [
    {
      name: {
        first: "first",
        last: "last",
      },
      login: {
        username: "x",
      },
    },
  ],
};

export const handlers = [
  rest.get('https://randomuser.me/api/', (req, res, ctx) => {
    return res(ctx.json(mockResponse))
    }
  })
]