使用Jest和React模拟非默认函数

Question

在测试文件中,我需要渲染一个组件,同时模拟它的一些子组件.文件结构看起来像这样松散.

档案1

import {A, B} from 'a-module';

export function MyComponent() {
    return (
        <div>
            <A /> // I need to mock
            <B /> // these components out
        </div>
    );
}

档案2

import {MyComponent} from 'File 1';

/*
 * In this file I would like to render MyComponent but
 * have components A and B be replaced by mocks
 */

我已经尝试过,jest.mock('a-module', () => 'Blah');但这并没有成功地模拟组件.但是,在文件1中使用默认导入时,这会有效.

在模拟组件A和在文件2中B渲染时的任何帮助MyComponent都将非常感激!

Answer 1

你可以像这样模拟非默认值:

jest.mock('a-module', () => ({
  __esModule: true,
  default: () => 'Blah',
  A: () => 'Blah',
  B: () => 'Blah'
}));

https://remarkablemark.org/blog/2018/06/28/jest-mock-default-named-export/

或使用__mocks__

作为替代方案,您可以__mocks__在原始模块旁边的文件夹下创建一个文件,其名称与模块相同:

a_module_folder > 
    a-module.js
    __mocks__ >
        a-module.js

而mock应该只导出模拟版本:

export const A = () => 'Blah';
export const B = () => 'Blah';

然后像这样嘲笑:

jest.mock( '一个模块');

对于node_modules,只需将__mocks__文件夹放在同一级别上即可node_modules

https://jestjs.io/docs/en/manual-mocks