reactjs - 如何使用 Jest & Enzyme 模拟 React 无状态柯里化函数

Question

我有这个无状态的 React 组件：

...
const Providers = ({ onSelectFeedProvider, ... }) => {
  const handleSelectFeedProvider = value => e => {
    e.preventDefault();
    onSelectFeedProvider({ target: { value } });
  };

  return {
    <Row onClick={handleSelectFeedProvider(1)}>
      ...
    </Row>
  }
}

和测试：

import Row from 'components/Common/Row';
import Providers from './index';

jest.mock('components/Common/Row', () => 'Row');

let onSelectFeedProviderSpy = jest.fn();
let onSelectProviderSpy = jest.fn();

const initialProps = {
  feedProvider: 0,
  onSelectFeedProvider: () => onSelectFeedProviderSpy(),
  selectedProvider: undefined,
  onSelectProvider: () => onSelectProviderSpy()
};

const mockComponent = props => {
  const finalProps = { ...initialProps, ...props };

  return <Providers {...finalProps} />;
};

it('should call correctly', () => {
  const wrapper = shallow(mockComponent());

  wrapper.find(Row).simulate('click', 'what do I have to do here');

  expect(onSelect).toHaveBeenCalledTimes(1);
});

如何正确调用该方法并通过覆盖？我想已经尝试了所有的可能性。有什么想法吗？

标签： reactjsunit-testingjestjsenzyme

Answer 1

你没有很多选择，一种方法是onSelect注射

const Component = ({onSelect}) => {
  const handleSelect = value => e => {
    e.preventDefault()
    onSelect && onSelect({ target: { value } })
  }

  return <Row onClick={handleSelect(1)} />
}

测试

it('should call correctly', () => {
  const spy = jest.fn()
  const wrapper = shallow(mockComponent({onSelectProvider: spy}));

  wrapper.find(Row).simulate('click', 'what do I have to do here');

  expect(spy).toHaveBeenCalledTimes(1);
});