来自默认导入的 Jest 模拟异步函数

IT技术 javascript reactjs unit-testing react-native jestjs
2021-05-21 22:47:31

我正在尝试模拟一个作为默认导出导出的异步函数，但我得到的只是TypeError：无法读取未定义的属性“then”

我试图模拟的是config.js：

const configureEnvironment = async (nativeConfig) => {
    return { await whatever() }
}

我正在测试的文件是Scene.js：

import configureEnvironment from './config';

class Scene extends React.Component {
    constructor(props) {
        nativeConfig = {};
        configureEnfironment(nativeConfig).then((config) => {
            // Do stuff
        }
    }
}

我的测试文件是Scene.test.js：

let getScene = null;
const configureEnvironmentMock = jest.fn();

describe('Scene', () => {
    jest.mock('./config', () => configureEnvironmentMock);

    const Scene = require('./Scene').default;

    getScene = (previousState) => {
        return shallow(
            <Scene prevState={previousState}>
                <Fragment />
            </Scene>,
        );
    };

    it('calls configureEnvironment with the nativeConfig', async () => {
        expect.assertions(1);
        const nativeConfig = {};

        getScene(nativeConfig);

        expect(configureEnvironmentMock).toHaveBeenCalledWith(nativeConfig);
    });
});

但是，运行测试的结果是：

TypeError: Cannot read property 'then' of undefined

我知道问题出在我模拟 configureEnvironment 的方式上，但我无法让它工作。

我还尝试模拟该功能，例如：

jest.mock('./config', () => {
    return {
        default: configureEnvironmentMock,
    };
});

但它的结果是：

TypeError: (0 , _config2.default) is not a function
2个回答

模拟module默认导出的一种干净而简单的方法是jest.spyOn与mockImplementation.

这是基于上述代码片段的工作示例：

配置文件

const whatever = async () => 'result';

const configureEnvironment = async (nativeConfig) => await whatever();

export default configureEnvironment;

场景.js

import * as React from 'react';
import configureEnvironment from './config';

export class Scene extends React.Component {
  constructor(props) {
    super(props);
    configureEnvironment(props.prevState).then((config) => {
      // Do stuff
    });
  }
  render() {
    return null;
  }
}

场景测试.js

import React, { Fragment } from 'react';
import { shallow } from 'enzyme';

import { Scene } from './Scene';
import * as config from './config';

describe('Scene', () => {

  const mock = jest.spyOn(config, 'default'); // spy on the default export of config
  mock.mockImplementation(() => Promise.resolve('config')); // replace the implementation

  const getScene = (previousState) => {
    return shallow(
      <Scene prevState={previousState}>
        <Fragment />
      </Scene>,
    );
  };

  it('calls configureEnvironment with the nativeConfig', async () => {
    expect.assertions(1);
    const nativeConfig = {};

    getScene(nativeConfig);

    expect(mock).lastCalledWith(nativeConfig);  // SUCCESS
  });
});

你可以像这样开玩笑地嘲笑任何事情 jest.mock('@material-ui/core/withWidth', () => ({ __esModule: true, isWidthUp: jest.fn((a, b) => true), default: jest.fn(fn => fn => fn) }))

其它你可能感兴趣的问题
上一篇iBox Nano 可以打印的最大物体尺寸是多少？ 下一篇如何在 createContext 中为 TypeScript 初始化 useState 的 set 函数？