[SOLVED] Mock Service Worker-Expected response resolver to return a mocked response Object but got undefined. The original response is going to be used instead

Mock Service Worker-Expected response resolver to return a mocked response Object but got undefined. The original response is going to be used instead

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.

Solution

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