Reactjs 如何使用笑话和酶测试按钮的点击道具

我正在测试一个按钮，它在React中有onClick功能。我的按钮如下所示：

<button 
          id='emailButton'
          className={classes.sceContactHeaderButton}
          data-toggle='collapse'
          data-target='#editEmailContact'
          onClick={props.handleToggle}
          tabIndex={0}
          title={(props.email.isOpen) ? 'Close Section' : 'Open Section'}
        >
          <span>{(props.email.isOpen) ? 'Close' : 'Details'}</span>
          <i className={(props.email.isOpen) ? 'fa fa-angle-up' : 'fa fa-angle-down'} />
        </button>

但我得到了一个错误，说：

TypeError:wrapper.find（…）.children（…）.at（…）.prop（…）不是函数

---

我做错了什么？非常感谢您的帮助。

我想您需要的是模拟活动，而不是将其称为道具。下面是一个如何执行此操作的示例：

 it('should call mock function when button is clicked', () => {
   const tree = shallow(
     <Button name='button test' handleClick={mockFn} />
   );
   tree.simulate('click');
   expect(mockFn).toHaveBeenCalled();
 });

it（'单击按钮时应调用模拟函数'，（）=>{
常数树=浅(
);
tree.simulate（'click'）；
expect（mockFn）.tohavebeincall（）；
});

---

我在这篇文章中发现了这个例子

经过太多的尝试后，成功地单击了props.button

MainButton.js

export default function MainButton(props) {
    let ButtonComponent = TouchableOpacity;

    if (Platform.Version >= 21) {
        ButtonComponent = TouchableNativeFeedback;
    }

    return (
        <View style={{...styles.buttonContainer, ...props.style}}>
            <ButtonComponent activeOpacity={0.6} onPress={props.onPress}> //Want to test props.onPress
                <View style={styles.button}>
                    <Text style={styles.buttonText}>{props.children}</Text>
                </View>
            </ButtonComponent>
        </View>
    );
}

导出默认功能主按钮（道具）{
let ButtonComponent=可触摸不透明度；
如果（Platform.Version>=21）{
ButtonComponent=可触摸的本地反馈；
}
返回(
//想要测试道具
{props.children}
);
}

MainButton.test.js

import { TouchableOpacity } from 'react-native';

describe('Main Button Component', () => {
    const goToMainScreen = jest.fn();
    const component = shallow(
        <MainButton onPress={goToMainScreen}>
            NEXT
        </MainButton>
    );

    it('should call onPress on click', async() => {
        const wrapper = component.find(TouchableOpacity);
        wrapper.getElement().props.onPress()
        expect(goToMainScreen).toHaveBeenCalled();
    });
});

从'react native'导入{TouchableOpacity}；
描述（'主按钮组件'，（）=>{
const goToMainScreen=jest.fn（）；
常数分量=浅(
下一个
);
它（'应在单击时按调用'，async（）=>{
const wrapper=component.find（TouchableOpacity）；
wrapper.getElement（）.props.onPress（）
期望（转到屏幕上）。已装入（）；
});
});

不，这不正确。选中：“即使名称暗示它模拟实际事件，.simulate（）实际上将根据您提供的事件来定位组件的道具。例如，.simulate（'click'）将实际获取onClick道具并调用它。”

find（'#emailButton'）.children（）。at（0）。道具（'onClick'））

尝试在

上单击

上的
属性，而不是
。你把元素瞄准错了
import { TouchableOpacity } from 'react-native';

describe('Main Button Component', () => {
    const goToMainScreen = jest.fn();
    const component = shallow(
        <MainButton onPress={goToMainScreen}>
            NEXT
        </MainButton>
    );

    it('should call onPress on click', async() => {
        const wrapper = component.find(TouchableOpacity);
        wrapper.getElement().props.onPress()
        expect(goToMainScreen).toHaveBeenCalled();
    });
});