Enzyme

Question

我有一个容器组件 (MyContainer)，它有一个通常作为 prop 传递给 MyComponent 的函数：

export default class MyContainer extends Component {

    ...
    someFunction(e){
        ...
    }
    ...

    render() {
        return (
            <MyComponent
                someFunction={this.someFunction}
            />
        );
    }
}

我的测试应该确保 MyComponent 正在接收这个函数作为 prop - 首先，我该怎么做？其次，我是否应该（可以）进行任何检查以确保此道具是 1) 函数和 2) 特定函数 'someFunction'?

Answer 1

这个想法基于调用 MyComponent 的 someFuction 道具，然后检查是否调用了 MyContainer 的 someFunction 方法：

import {mount} from 'enzyme';
import sinon from 'sinon';
import expect from 'expect';

describe('<MyContainer />', () => {

   it(`renders <MyComponent /> which receives the method "MyContainer::someFunction" as props`, () => {
       const someFunctionMethod = sinon.stub(MyContainer.prototype, 'someFunction').returns(true);
       const wrapper = mount(<MyContainer />);
       const actualSomeFunctionProp = wrapper.find(MyComponent).at(0).props().someFunction;

       expect(actualSomeFunctionProp).toBeA('function');
       actualSomeFunctionProp();
       expect(someFunctionMethod.called).toBeTruthy();
       someFunctionMethod.restore();

   })

})

Answer 2

您可以使用 jest.fn() 创建 mock function and then determine if it was been called

例如，如果单击一个按钮会触发您的 someFunction，您可以这样测试它：

it('calls the someFunction handler when the button is clicked', () => {
  const mockFunction = jest.fn();
  const wrapper = shallow(<MyComponent someFunction={mockFunction} />);
  wrapper.find('button').simulate('click');
  expect(mockFunction).toHaveBeenCalled();
});

Enzyme - 如何从容器中获取函数的实例，作为 prop 传递给组件？

Enzyme - how to get an instance of a function from a container, to pass as a prop to a component?

reactjs