Question

我正在使用一个使用json模式呈现表单的插件。对于输入，按钮等元素，它在结构中使用一个React组件来渲染该组件。在我们的应用程序中，我们收到描述布局的模式json。例如，我们可能会收到类似的信息（简化后使其易于阅读）

{
  component: 'input'
}

，我有一个转换函数，可将组件放置在结构中被检测到的位置。它将发送类似的内容：（再次简化）

import Table from './Table';

covert(schema) {
  return {
    component: Table // where table is: (props:any) => JSX.Element
  }
}

我想为此编写一个测试，但是在将结果与预期结果进行比较时遇到了麻烦。在测试中，我模拟了Table组件，并通过一个命名的模拟函数作为第二个参数进行发送。然后，在预期结果中使用相同的命名参数。

我收到一条错误消息：The second argument of jest.mock must be an inline function。我可以将其更改为内联函数，但是如何在用于比较的预期结构中使用它？

//测试代码


import React from 'react';

const mockComponent = () => <div>table</div>
jest.mock('./Table', mockComponent);

const schema = {
  component: 'table'
}

describe('Component Structure', () => {
  test('componentizes the schema structure', () => {

    const results = convert(schema);
    const expected = {
      component: mockComponent
    };
    expect(results).toEqual(expected);

  });
});

Answer 1

正确模拟组件是这样的：

const mockComponent = () => <div>table</div>
jest.mock('./Table', () => mockComponent)

Answer 2

错误是因为您没有正确模拟组件，正确的方法应该是：

jest.mock('./Table', () => mockComponent);

假设您已经将模拟组件定义为：

const mockComponent = () => <div>table</div>

或者您可以这样做：

jest.mock('./Table', () => () => <div />);

Jest Mock React组件

2 个答案: