Javascript onClick通过测试，但在实际单击时失败

这是我的手风琴组件

import React, {Component, Fragment} from 'react';
import ArrowTemplate from "./ArrowTemplate";
import ContentTemplate from "./ContentTemplate";

class Accordion extends Component {
    constructor(props) {
        super(props);
        this.state = {isAccordionExpanded: false};
        this.foldAccordion = this.foldAccordion.bind(this);
        this.expandAccordion = this.expandAccordion.bind(this);
    }

    expandAccordion() {
        console.log(1);
        this.setState({isAccordionExpanded: true});
    }

    foldAccordion() {
        console.log(2);
        this.setState({isAccordionExpanded: false});
    }

    render() {
        const {state} = this;
        const {isAccordionExpanded} = state;

        if (isAccordionExpanded === false) {
            return (
                <Fragment>
                    <ArrowTemplate
                        aria={`aria-expanded="true"`}
                        onClick={this.expandAccordion}
                        direction={'down'}
                        color={'black'}
                        styles={'background:yellow'}
                    />
                </Fragment>
            );
        } else if (isAccordionExpanded === true) {
            return (
                <Fragment>
                    <ArrowTemplate
                        aria={`aria-expanded="true"`}
                        onClick={this.foldAccordion}
                        color={'black'}
                        direction={'up'}
                    />
                    <ContentTemplate/>
                </Fragment>
            );
        }
    }
}

export default Accordion;

这是我的相关测试

describe("<Accordion/>",
    () => {
        let wrapper;
        beforeEach(
            () => {
                wrapper = shallow(
                    <Accordion/>
                );
            }
        );
        it('should have one arrow at start',
            function () {
                expect(wrapper.find(ArrowTemplate)).toHaveLength(1);
            }
        );
        it('should change state onClick',
            function () {
                wrapper.find(ArrowTemplate).simulate("click");
                expect(wrapper.state().isAccordionExpanded).toEqual(true);
            }
        );
        it('should call FoldAccordionMock onClick',
            function () {
                wrapper.setState({isAccordionExpanded: true});
                wrapper.find(ArrowTemplate).simulate("click");
                expect(wrapper.state().isAccordionExpanded).toEqual(false);
            }
        );
        it('should display content if isAccordionExpanded = true',
            function () {
                wrapper.setState({isAccordionExpanded: true});
                expect(wrapper.find(ContentTemplate).exists()).toEqual(true);
            }
        );
        it('should hide content if isAccordionExpanded = false',
            function () {
                expect(wrapper.find(ContentTemplate).exists()).toEqual(false);
            }
        );
    }
);

描述（“”，
() => {
让包装纸；
之前(
() => {
包装纸=浅(
);
}
);
它（'应该在开始处有一个箭头'，
函数（）{
expect（wrapper.find（ArrowTemplate））.toHaveLength（1）；
}
);
它（'应在单击时更改状态'，
函数（）{
find（箭头模板）.simulate（“单击”）；
expect（wrapper.state（）.isAccordionExpanded）.toEqual（true）；
}
);
它（'应该调用FoldacrdionMock onClick'，
函数（）{
setState（{isAccordionExpanded:true}）；
find（箭头模板）.simulate（“单击”）；
expect（wrapper.state（）.isAccordionExpanded）.toEqual（false）；
}
);
它（'如果isAccordionExpanded=true，则应显示内容'，
函数（）{
setState（{isAccordionExpanded:true}）；
expect（wrapper.find（ContentTemplate.exists（））.toEqual（true）；
}
);
它（'如果isAccordionExpanded=false，则应隐藏内容'，
函数（）{
expect（wrapper.find（ContentTemplate.exists（））.toEqual（false）；
}
);
}
);

---

所以问题是，当我tun测试时，simulate（单击）似乎起作用，并且所有测试都通过了。但是，当我自己单击组件时，什么也没有发生。甚至连控制台日志都没有。将onClick更改为

onClick={（）=>console.log（1）}

也不起作用。有什么问题吗？

StyledArrowTemplate

内部组件不知道有关

onClick的任何信息

ArrowTemplate
不知道
onClick
的意思，它只是它的另一个任意道具

但是，如果您按照@ravibagul91在他们的评论中所说的那样做，您应该再次传递onClick，
StyledArrowTemplate
可能知道
onClick
的意思

因此，只需添加
样式行模板
内部组件不知道有关单击
的任何信息

ArrowTemplate
不知道
onClick
的意思，它只是它的另一个任意道具

但是，如果您按照@ravibagul91在他们的评论中所说的那样做，您应该再次传递onClick，
StyledArrowTemplate
可能知道
onClick
的意思

所以只需添加手风琴组件

import React, { Component, Fragment } from "react";
import ArrowTemplate from "./ArrowTemplate";
import ContentTemplate from "./ContentTemplate";

class Accordion extends Component {
  constructor(props) {
    super(props);
    this.state = { isAccordionExpanded: false };
  }

  toggleAccordian = () => {
    console.log(1);
    this.setState({ isAccordionExpanded: !isAccordionExpanded });
  };

  render() {
    const { state } = this;
    const { isAccordionExpanded } = state;

    if (isAccordionExpanded) {
      return (
        <Fragment>
          <ArrowTemplate
            aria={`aria-expanded="true"`}
            onClick={() => this.toggleAccordian()}
            color={"black"}
            direction={isAccordionExpanded ? "up" : "down"}
            styles={`background:{isAccordionExpanded ? 'yellow' : ''}`}
          />
          <ContentTemplate />
        </Fragment>
      );
    }
  }
}

export default Accordion;


import React，{Component，Fragment}来自“React”；
从“/ArrowTemplate”导入箭头模板；
从“/ContentTemplate”导入ContentTemplate；
类手风琴扩展组件{
建造师（道具）{
超级（道具）；
this.state={isAccordionExpanded:false}；
}
toggleAccordian=（）=>{
控制台日志（1）；
this.setState（{isAccordionExpanded:！isAccordionExpanded}）；
};
render（）{
const{state}=这个；
const{isAccordionExpanded}=状态；
如果（isAccordionExpanded）{
返回(
this.toggleAccordian（）}
颜色={“黑色”}
方向={isAccordionExpanded？“向上”：“向下”}
样式={`background:{isAccordionExpanded？'yellow'：''}}
/>
);
}
}
}
导出默认手风琴；
手风琴组件

import React, { Component, Fragment } from "react";
import ArrowTemplate from "./ArrowTemplate";
import ContentTemplate from "./ContentTemplate";

class Accordion extends Component {
  constructor(props) {
    super(props);
    this.state = { isAccordionExpanded: false };
  }

  toggleAccordian = () => {
    console.log(1);
    this.setState({ isAccordionExpanded: !isAccordionExpanded });
  };

  render() {
    const { state } = this;
    const { isAccordionExpanded } = state;

    if (isAccordionExpanded) {
      return (
        <Fragment>
          <ArrowTemplate
            aria={`aria-expanded="true"`}
            onClick={() => this.toggleAccordian()}
            color={"black"}
            direction={isAccordionExpanded ? "up" : "down"}
            styles={`background:{isAccordionExpanded ? 'yellow' : ''}`}
          />
          <ContentTemplate />
        </Fragment>
      );
    }
  }
}

export default Accordion;


import React，{Component，Fragment}来自“React”；
从“/ArrowTemplate”导入箭头模板；
从“/ContentTemplate”导入ContentTemplate；
类手风琴扩展组件{
建造师（道具）{
超级（道具）；
this.state={isAccordionExpanded:false}；
}
toggleAccordian=（）=>{
控制台日志（1）；
this.setState（{isAccordionExpanded:！isAccordionExpanded}）；
};
render（）{
const{state}=这个；
const{isAccordionExpanded}=状态；
如果（isAccordionExpanded）{
返回(
this.toggleAccordian（）}
颜色={“黑色”}
方向={isAccordionExpanded？“向上”：“向下”}
样式={`background:{isAccordionExpanded？'yellow'：''}}
/>
);
}
}
}
导出默认手风琴；
您必须在元素上实际写入
onClick
。试试这个，
你必须在你的元素上点击
onClick
。试试这个，