如何在没有道具的情况下测试按钮点击玩笑/酶答案

【问题标题】：How to test button click on jest/enzyme without props如何在没有道具的情况下测试按钮点击玩笑/酶
【发布时间】：2022-02-11 16:23:38
【问题描述】：

我要测试的是单击按钮并发生了一些操作，但我未通过测试并在单击时收到 0 个呼叫。我没有从道具传递 onclick 功能。我正在使用 materialUi 按钮

const LoginFunction = () => {

  const handleClick = () => {
    console.log('some action here')
  };

  return (
    <Button
        data-test="btn"
        className='btn'
        onClick={() => {
            handleClick();
        }}
    >
       Some text
    </Button>
 )};

我是这样写测试的

describe('Test Login component', () => {

  it('should trigger click event', () => {
    const mockCallBack = jest.fn();
    const wrapper = shallow(<LoginFunction />);

    wrapper.simulate('click');
    expect(mockCallBack.mock.calls.length).toBe(1);
   }); 
 });

也试过这种方法

 describe('Test Login component', () => {

  it('should trigger click event', () => {
    const mockCallBack = jest.fn();
    const wrapper = shallow(<LoginFunction />);

    wrapper.find('.btn').simulate('click');
    expect(mockCallBack.mock.calls.length).toBe(1);
   }); 
 });

【问题讨论】：

mockCallBack 不会被调用。这就是断言失败的原因。您可能希望将回调作为道具传递给LoginFunction 组件并调用它
BUt 我不是从道具调用handleClick函数，如果我这样写 - const wrapper = shallow();那是行不通的。当我不需要作为道具传递时，我正在寻找解决方案

标签： javascript reactjs testing jestjs enzyme

【解决方案1】：

**Also in the main component you can directly call the handler in onclick like this** 

     <Button
            data-test="btn"
            className='btn'
            onClick={handleClick}
        >
           Some text
        </Button>

describe('Test Login component', () => {

  it('should trigger click event', () => {
  const wrapper=mount( <LoginFunction />);
    const result=wrapper.find('button').simulate('click')
   expect(result).toBe('some action here')
 });

【讨论】：

我应该分开文件，同样的问题可能在其他测试中也有，有什么办法可以处理不同的文件吗？
抱歉，您能否说得更具体一些。请发布您要测试的代码块
我发布了我的整个组件，这是一个包含按钮的简单组件，当按钮被触发时，我应该为按钮编写测试。主要问题是我不想在外面写函数并用props传递，我想在组件内部写按钮点击函数。