How to mock Axios fetch in react testing

June 17, 2022

I am new to react testing and I just wanted to write a test for fetching API data of a react component.

Here is my component which fetches data successfully.

ListData.js

const ListData = () => {
  const [data, setData] = useState([]);
  const [searchValue, setSearchValue] = useState("");

  useEffect(() => {
    axios
      .get("https://images-api.nasa.gov/search?media_type=image")
      .then((response) => {
        setData(response.data);
      })
      .then(
        (response) => {},
        (err) => {
          console.log(err);
        }
      );
  }, []);

}

And I tried to write the test for the above code as follows

import { rest } from "msw";
import { setupServer } from "msw/node";
import ListData from "./Components/ListData";

const body = { hello: "world" };

const server = setupServer(
  rest.get(
    "https://images-api.nasa.gov/search?media_type=image",
    (_, res, ctx) => {
      return res(ctx.status(200), ctx.json(body));
    }
  )
);

describe("ListData", () => {
  beforeAll(() => server.listen());

  afterEach(() => server.resetHandlers());

  afterAll(() => server.close());
});

Bu I got error saying Your test suite must contain at least one test., What did I miss here?

>Solution :

you are exactly missing what the error says u are missing, a test.
If you add some test that error will disappear.

describe("ListData", () => {
  beforeAll(() => server.listen());

  afterEach(() => server.resetHandlers());

  afterAll(() => server.close());
  it('should do something', () => {
    expect(true).toBe(true)
  })
});

Also, I recommend you set up msw server on a jest setup file otherwise you will need to repeat this setup on every test file:

// jest.config.js
module.exports = {
  setupFilesAfterEnv: ['./jest.setup.js'],
}

// jest.setup.js
import { server } from './mocks/server.js'
// Establish API mocking before all tests.
beforeAll(() => server.listen())
// Reset any request handlers that we may add during the tests,
// so they don't affect other tests.
afterEach(() => server.resetHandlers())
// Clean up after the tests are finished.
afterAll(() => server.close())

You can follow these docs: https://mswjs.io/docs/getting-started/integrate/node