React Jest TypeError: Cannot read property 'baseUrl' of undefined

Question

I have a simple login api call where the base url is in config file, code below

api.js

export const login = (username, password) => {
    Axios.post(`${config.loginApi.baseUrl}/login`, {
        username,
        password
    })
    .then(res => res)
    .catch(e => e);
};

I wrote the test case(s) below,

api.test.js

import axios from 'axios';
import { login } from './api';
import MockAdapter from 'axios-mock-adapter';
import config from 'config';


describe('signin signup Api', () => {
    
afterEach(() => {
        jest.restoreAllMocks();
    });

    it('logs in successfully', (done) => {
        const mock = new MockAdapter(axios);
        mock.onGet(`${config.loginApi.baseUrl}/login`).reply(200, { data: '1234abcd' });
        login('dee@gmail.com', 'test').then((res)=>{
            expect(res).toEqual('1234abcd');
            done();
        });
});

or the other test case I wrote earlier

import axios from 'axios';
import { login } from './api';
import config from 'config';

jest.mock('axios');

it('logs in successfully', async () => {
      axios.post.mockImplementationOnce(() => Promise.resolve({ data: '1234abcd' }));
      await expect(login('dee@gmail.com', 'test')).resolves.toEqual('1234abcd');
});

I researched and found this post close to my issue. But in all the cases I'm getting TypeError: Cannot read property 'baseUrl' of undefined

Why is this not able to know the baseUrl?

I tried mocking the config,

jest.mock(config);

got TypeError: moduleName.split is not a function.

Please suggest a fix/workaround.

Adding more info on the config

in config folder, I have

require('dotenv').config();

module.exports = config;

in development environment, it will pick this config from dev.js, in prod - prod.js and so on

in public folder, dev.js file I have

loginApi: {
        baseUrl: 'https://abcd.com',
        mocks: true,
        mockDelay: 2000
    }

Are you aliasing the `config` module? If not, you should change your import with a relative path. — Chris, Sep 04 '20 at 07:24
@Christiaan its the global config. I added more details on this config above and the solution that worked for me below. — dee, Sep 04 '20 at 08:32
Although your answer will work, I still suggest importing the config file using a relative import `./config` or creating an [alias](https://webpack.js.org/configuration/resolve/#resolvealias). Now you are destroying the purpose of the `dotenv` package. — Chris, Sep 04 '20 at 08:54
@Christiaan Ok i'll add a relative import but I'm not sure how you feel this is destroying the purpose of dotenv. — dee, Sep 04 '20 at 14:58
Because you will now have a configuration on two separate locations. One in your `.env` file and one your `setupTests.js`. The first works with environment variables, while your `setupTest.js` implementation will not. This can lead to unexpected behaviour. — Chris, Sep 07 '20 at 12:55
@Christiaan I didn't have baseUrl, other test details in config/env. — dee, Jun 29 '21 at 14:25

score 0 · Answer 1 · answered Sep 04 '20 at 08:27

I found the fix for this issue,

in the setupTests.js, I added

global.config ={
   loginApi: {
        baseUrl: 'https://abcd.com',
        mocks: true,
        mockDelay: 2000
    } 
}

This fixed that TypeError: Cannot read property 'baseUrl' of undefined issue.

React Jest TypeError: Cannot read property 'baseUrl' of undefined

1 Answers1