CODEWITHSUNDEEP
reactjsunit-testingjestjsaxiosenzyme
CrimockLyte
CrimockLyte

Reputation: 71

Getting '_axios.default.create is not a function' when trying to test a component that makes an axios call with Jest

I am attempting to use Jest/Enzyme to test if an axios function goes through. I've tried various solutions, ways of mocking, as well as just redesigning the component itself to have the test recognize the axios request but I keep getting the same error.

At this point I've modified my test to just get past the axios failure, and then I will will return to a conditional pass/fail test. Right now my test is plainly:

import { shallow }  from 'enzyme';
import Assets from '../src/components/App';

jest.mock('axios', () => {
  return {
    __esModule: true,
    default: jest.fn()
  }
});

describe("Component", () => {
  const component = shallow(<App />);    
})

and I get returned the error:

TypeError: _axios.default.create is not a function

The app is question has a reference to an axios request from another file on App.js there is a command:

let response = await axiosGetTest.get('...');

axiosGetTest is a function in another file where the error is originating from, in that file we have:

const axiosGetTest = axios.create({
    baseURL: '...',
    timeout: 15000,
    headers: {
     ...
    }
});

Sorry if the explanation is crude, I am very new to unit testing in JavaScript

Upvotes: 3

Views: 7078

Answers (1)

Lin Du
Lin Du

Reputation: 102207

Here is a unit test example:

App.jsx:

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

const axiosGetTest = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 15000,
  headers: {},
});

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { user: { name: '' } };
  }
  componentDidMount() {
    axiosGetTest.get('/api/user').then((user) => this.setState({ user }));
  }
  render() {
    const { user } = this.state;
    return <div>{user.name}</div>;
  }
}

App.test.jsx:

import { shallow } from 'enzyme';
import axios from 'axios';
import App from './App';
import { act } from 'react-dom/test-utils';

async function flushEffects() {
  await act(async () => {
    await new Promise((resolve) => setTimeout(resolve, 0));
  });
}

jest.mock('axios', () => {
  const mAxiosInstance = { get: jest.fn() };
  return {
    create: jest.fn(() => mAxiosInstance),
  };
});

describe('66465749', () => {
  afterAll(() => {
    jest.resetAllMocks();
  });
  it('should pass', async () => {
    axios.create().get.mockResolvedValueOnce({ name: 'teresa teng' });
    const wrapper = shallow(<App></App>);
    expect(wrapper.state('user')).toEqual({ name: '' });
    await flushEffects();
    expect(wrapper.state('user')).toEqual({ name: 'teresa teng' });
  });
});

unit test result:

 PASS  examples/66465749/App.test.jsx
  66465749
    ✓ should pass (16 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |                   
 App.jsx  |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.68 s, estimated 4 s

source code: https://github.com/mrdulin/jest-v26-codelab/tree/main/examples/66465749

Upvotes: 2

Related Questions