Question

我正在尝试使用Jest和Enzyme在React w / TypeScript中测试一个组件。

我的测试如下：

import * as React from 'react';
import { shallow } from 'enzyme';
import * as sinon from 'sinon';

import { ButtonGroup } from '../../../src/components';

describe('.ButtonGroup', () => {
  it('should render', () => {
    const { wrapper } = setup({});
    expect(wrapper.exists()).toBe(true);
  });

  it('should call the rightHandler handler on click', () => {
    const onClickHandler = sinon.spy();
    const wrapper = setup({ rightHandler: onClickHandler });
    wrapper.find('a').simulate('click');
    expect(onClickHandler).toHaveBeenCalled();
  });
});
const setup = propOverrides => {
  const props = Object.assign({ leftBtn: MOCK_LEFT, rightBtn: MOCK_RIGHT }, propOverrides);
  const wrapper = shallow(<ButtonGroup {...props} />);
  return { wrapper };
};

const MOCK_LEFT = { type: 'reset', className: 'is-light', value: 'Reset' };
const MOCK_RIGHT = { type: 'button', className: 'is-primary', value: 'Search' };

但是我收到了错误：TypeError: wrapper.find is not a function

我正在测试的组件看起来像

import * as React from 'react';

const ButtonGroup = ({ leftBtn, rightBtn, leftHandler = null, rightHandler = null }) => (
  <div className="field is-grouped is-grouped-right">
    <p className="control">
      <input type={leftBtn.type} className={'button ' + leftBtn.className} value={leftBtn.value} onClick={leftHandler} />
    </p>
    <p className="control">
      <input type={rightBtn.type} className={'button ' + rightBtn.className} value={rightBtn.value} onClick={rightHandler} />
    </p>
  </div>
);

export default ButtonGroup;

我想基本上资产点击，我期望的行动被称为。

Answer 1

尝试

const setup = propOverrides => {
  const props = Object.assign({ leftBtn: MOCK_LEFT, rightBtn: MOCK_RIGHT }, propOverrides);
  const wrapper = shallow(<ButtonGroup {...props} />);
  return wrapper;
};

执行return { wrapper }与return { wrapper: wrapper }相同，因此它不再是您的DOM元素，而是具有包含DOM元素的属性wrapper的对象。

这是small bin来说明问题。

wrapper.find不是一个函数

1 个答案: