React Jest TypeError：无法读取未定义的属性“baseUrl”答案

【问题标题】：React Jest TypeError: Cannot read property 'baseUrl' of undefinedReact Jest TypeError：无法读取未定义的属性“baseUrl”
【发布时间】：2020-12-23 10:48:47
【问题描述】：

我有一个简单的登录 api 调用，其中基本 url 在配置文件中，代码如下

api.js

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

我在下面写了测试用例，

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();
        });
});

或者我之前写的其他测试用例

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');
});

我研究并发现 this post 与我的问题很接近。但在所有情况下，我得到 TypeError：无法读取未定义的属性“baseUrl”

为什么这不能知道baseUrl？

我尝试模拟配置，

jest.mock(config);

得到 TypeError：moduleName.split 不是函数。

请提出修复/解决方法。

在配置中添加更多信息

在配置文件夹中，我有

require('dotenv').config();

module.exports = config;

在开发环境中，它将从 dev.js、prod - prod.js 等中选择此配置

在公共文件夹中，我有 dev.js 文件

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

【问题讨论】：

您是否为config 模块添加别名？如果没有，您应该使用相对路径更改您的导入。
@Christiaan 它的全局配置。我在上面的这个配置和下面对我有用的解决方案上添加了更多细节。
虽然你的回答会起作用，但我仍然建议使用相对导入./config 或创建alias 来导入配置文件。现在你正在破坏dotenv 包的目的。
@Christiaan 好的，我会添加一个相对导入，但我不确定你觉得这会破坏 dotenv 的目的。
因为您现在将在两个不同的位置进行配置。一个在您的.env 文件中，一个在您的setupTests.js 中。第一个适用于环境变量，而您的 setupTest.js 实现不会。这可能会导致意外行为。

标签： reactjs jestjs axios jest-mock-axios

【解决方案1】：

我找到了解决这个问题的方法，

在 setupTests.js 中，我添加了

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

这修复了 TypeError: Cannot read property 'baseUrl' of undefined 问题。

【讨论】：