模拟作为道具传入的导入组件

Question

我有一个组件 ExternalComponent 来自另一个模块，通过另一个模块获取
配置js文件。然后将其作为道具传递到我正在测试的组件中，如下所示。

const LocalComponent = ({
  externalComponent: ExternalComponent, // imported Component coming in as a prop
}) => {
  const onChange = (index) => {
    console.log('test);
    SetData1();
    SetData2();
  };

  return (
    <div className={styles.ExternalComponent}>
      <ExternalComponent
        onChange={onChange}
      />
    </div>
  );
};

export default LocalComponent;

我正在尝试通过以下使用 mount 的测试来测试 onChange 是否正常工作。
但无法这样做，最终出现以下错误。

Uncaught [Error: mockConstructor(...): Nothing was returned from render. This usually means a return statement is missing.

shallow 工作正常，但我正在检查 onChange 时希望通过 mount 进行测试。
有办法解决这个问题吗？因为我不能像下面这样模拟它，因为这不是我项目中的组件。

// not gonna work, is an imported Component, not in my paths. 
jest.doMock('./ExternalComponent', () => {
  const ExternalComponent = () => <div />;
  return ExternalComponent;
});

这是因上述错误而失败的测试。

import React from 'react';
import { shallow, mount } from 'enzyme';
import LocalComponent from './LocalComponent';

describe('LocalComponent', () => {

  const mockSetData1 = jest.fn();
  const mockSetData2 = jest.fn();
  const mockExternalComponent = jest.fn();

  const defaultProps = {
    externalComponent: mockExternalComponent,
    SetData1: mockSetData1,
    SetData2: mockSetData2
  };

  const shallowRender = props => shallow(<LocalComponent {...defaultProps} {...props} />);
  const mountRender = props => mount(<LocalComponent {...defaultProps} {...props} />);

  // works fine since using shallow
  it('should render', () => {
    const rendered = shallowRender();
    expect(rendered).toMatchSnapshot();
  });

  // FAILING TEST
  it('should render via mount too', () => {
    const rendered = mountRender(); // this breaks with above error

    // trying to achieve following test, currently unavailable.
    rendered.find('.ExternalComponent').simulate('click');
    expect(mockSetData1).toHaveBeenCalled();
    expect(mockSetData2).toHaveBeenCalled();
  });
});

Answer 1

在ExternalComponent 道具中，似乎您的功能onChange 在触发External 的功能onChange 时被触发。我假设 ExternalComponent 中的 onChange 函数链接到输入，带有 value 道具，并且方法 SetData1 和 SetData2 来自道具。（你的 LocalComponent 道具中没有它们吗？）

要触发它，在您的测试中，您应该在 ExternalComponent 中模拟“更改”操作而不是“单击”操作。
更新这个，你应该有以下内容：

it('should render via mount too', () => {
  const wrapper = mount(<LocalComponent {...defaultProps} />

  wrapper.find('.ExternalComponent').simulate('change', { target: { value: "newValue" } });
  expect(mockSetData1).toHaveBeenCalled();
  expect(mockSetData2).toHaveBeenCalled();
});

模拟作为道具传入的导入组件

Mock an imported Component that is passed in as a prop

javascript

reactjs

jestjs

enzyme