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中使用默认导入时，此方法有效。

在文件2中呈现A时，在模拟组件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

并且该模拟应该只导出模拟的版本：

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

然后像这样模拟：

jest.mock（'a-module'）;

对于node_modules，只需将__mocks__文件夹放在与node_modules相同的级别上

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

Answer 2

测试React组件主要是通过酶来完成的，如果您只想通过Jest来进行测试，则可能是选择了错误的工具。我只能猜测为什么需要模拟一个组件，但是最确定的是，您将能够使用Enzyme实现它。

有专门针对测试React创建的酶浅渲染。开玩笑本身不能够呈现组件。根据{{3}}的定义是：

浅呈现有助于约束您将组件作为一个单元进行测试，并确保您的测试不会间接断言子组件的行为。

简单地说，它将使测试组件的深度达到1级，例如

user

基本上，您不需要模拟它的任何依赖组件，这些都已经被酶@Entity @Table(name = "users") public class User{ // the rest of the code }所模拟

您可以做的是测试，当您将某些道具传递给// File2.js import { MyComponent } from 'File1'; import { shallow } from 'enzyme'; describe('MyComponent', () => { it('should render shallowly my component', () => { const wrapper = shallow(<MyComponent />); console.log(wrapper.debug()); // output: // <div> // <A /> // <B /> // </div> // Note: even if component <A /> is consisting of some markup, // it won't be rendered }); });，相关组件shallow()和<MyComponent />收到预期的道具时。

<A />

Answer 3

如果您有一个不是默认导出的 React 组件，它实际上是一个 good practice (since default exports should be avoided)：

export function MyComponentX() {
    return (
        <div>...</div>
    );
}

你可以很容易地开玩笑：

jest.mock('path/to/MyComponentX', () => ({
  MyComponentX: () => <>MOCK_MY_COMPONENT_X</>,
}));

使用Jest和React模拟非默认功能

3 个答案: