Cannot read property 'then' of undefined - Axios get in React

user_13699811 0
Viewed 2318

I want to simulate clicking a button (#reset), button has onClick fetching with axios. I wan to mock this data, but I'm getting an error: "Cannot read property 'then' of undefined"

Test:

import React from "react";
import PersonsList from "./Components/PersonsList/PersonsList";
import * as axios from "axios";
import { shallow } from "enzyme";

const mockData = [
  {
    gender: "female",
  },
];
jest.mock("axios");
describe("axios", () => {
  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<PersonsList />);
  });
  axios.get.mockResolvedValue({ data: mockData });
  it("reset", () => {
    const resetButton = wrapper.find("#reset");
    resetButton.simulate("click");
  });
});

button:

  <button
          className="actions__modify-list"
          onClick={() => {
            getPeople();
          }}
          id="reset"
        >

Function called on button click:

  const getPeople = () => {
    const url = "https://randomuser.me/api/?results=10";
    axios(url)
      .then((res) => {
        setPeople(res.data.results);
      })
      .catch(() => {
        setError(true);
      });
  };
axios enzyme reactjs mocking
1 Answers

You should mock resolved value for axios(), NOT axios.get() method.

E.g.

PersonsList.jsx:

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

export function PersonsList() {
  const [person, setPeople] = useState();
  const [error, setError] = useState(false);

  const getPeople = () => {
    const url = 'https://randomuser.me/api/?results=10';
    axios(url)
      .then((res) => {
        setPeople(res.data.results);
      })
      .catch(() => {
        setError(true);
      });
  };

  return (
    <div>
      <button
        className="actions__modify-list"
        onClick={() => {
          getPeople();
        }}
        id="reset"
      ></button>
    </div>
  );
}

PersonsList.test.jsx:

import { PersonsList } from './PersonsList';
import axios from 'axios';
import React from 'react';
import { shallow } from 'enzyme';

jest.mock('axios');

const mockData = [{ gender: 'female' }];

describe('68393613', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<PersonsList />);
  });
  test('should pass', () => {
    axios.mockResolvedValue({ data: mockData });
    const resetButton = wrapper.find('#reset');
    resetButton.simulate('click');
  });
});

test result:

 PASS  examples/68393613/PersonsList.test.jsx (8.311 s)
  68393613
    ✓ should pass (12 ms)

-----------------|---------|----------|---------|---------|-------------------
File             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------|---------|----------|---------|---------|-------------------
All files        |   91.67 |      100 |      80 |   91.67 |                   
 PersonsList.jsx |   91.67 |      100 |      80 |   91.67 | 15                
-----------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        8.837 s, estimated 11 s
user_64635580
Related