Question

我有一个父组件，其中有一个handleClick，它作为道具传递给孩子。

// parent.js

_handleClick = async (buttonName, id) => {
    if(buttonName === 'yes'){
        ... some logic
    }else{
        ... some logic
    }
}

<Child 
  handleClick={(buttonName, id) => this._handleClick(buttonName, id)}
  />

所以现在我该如何调用_handleClick并运行测试用例。我应该如何调用该方法。

我在下面尝试过，但是由于它具有箭头功能，并且没有两个参数，因此没有按预期工作。

// test.js

const wrapper = shallow(<parent />)
expect(wrapper.find('Child').length).toEqual(1)
wrapper.find('Child').prop('handleClick')

Answer 1

wrapper.find('Child').prop('handleClick')是函数，因此您可以这样调用它：

wrapper.find('Child').prop('handleClick')( /* your args here */ );

这是一个简化的工作示例：

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

const Child = () => (<div></div>);

class Parent extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = { val: 'initial' };
  }
  _handleClick = async (buttonName, id) => {
    // ... await something ...
    this.setState({ val: buttonName });
  }
  render() {
    return (<Child handleClick={(buttonName, id) => this._handleClick(buttonName, id)} />);
  }
}

test('click handler', async () => {
  const wrapper = shallow(<Parent />);
  expect(wrapper.find('Child').length).toEqual(1);  // Success!
  await wrapper.find('Child').prop('handleClick')('the button name');  // <= call the handler
  expect(wrapper.state()).toEqual({ val: 'the button name' });  // Success!
});

Answer 2

好吧，您可能需要使用mount方法而不是shallow来渲染父组件。这将呈现子元素，否则将仅呈现一个占位符。然后，您可能想通过单击按钮或在子组件中触发该事件的任何方式来触发实际的单击事件。

测试作为道具从父母传递给孩子的异步功能

2 个答案: