javascript - 为什么酶包装没有找到按钮？

Question

我安装了这些开发依赖项：

"devDependencies": {
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.6",
    "jest-enzyme": "7.1.2"
  },

这是我的测试代码：

const onClickSpy = jest.fn();
  const wrapper = shallow(
    <MessageItem
      message={{ message: "testmessage", table: "infotable" }}
      deleteMessageFromTable={onClickSpy}
    />
  );

我有一个包装器，其中包含以下内容：

<div class="MuiPaper-root-7 MuiPaper-elevation8-17 MuiPaper-rounded-8 MuiCard-root-6">
  <div class="MuiCardContent-root-34">
    <p class="MuiTypography-root-35 MuiTypography-body1-44 MuiTypography-colorTextSecondary-68 MuiTypography-gutterBottom-62 MessageItem-title-5">
      testmessage
    </p>
  </div>
  <div class="MuiCardActions-root-71">
    <button
      class="MuiButtonBase-root-100 MuiButton-root-74 MuiButton-text-76 MuiButton-flat-79 MuiButton-sizeSmall-97 MessageItem-cardclearbutton-1 MuiCardActions-action-73"
      tabindex="0"
      type="button"
      id="button-messageitem-1"
    >
      <span class="MuiButton-label-75">Clear</span>
    </button>
  </div>
</div>

为什么wrapper.find("#button-messageitem-1");找不到按钮？

的输出console.log(wrapper.debug());是：

<WithStyles(Button) id="button-messageitem-1" size="small" className="MessageItem-cardclearbutton-1 MuiCardActions-action-73" onClick={[Function: onClick]}>
        <Button id="button-messageitem-1" size="small" className="MessageItem-cardclearbutton-1 MuiCardActions-action-73" onClick={[Function: onClick]} classes={{...}} color="default" component="button" disabled={false} disableFocusRipple={false} fullWidth={false} mini={false} type="button" variant="text">
          <WithStyles(ButtonBase) className="MuiButton-root-74 MuiButton-text-76 MuiButton-flat-79 MuiButton-sizeSmall-97 MessageItem-cardclearbutton-1 MuiCardActions-action-73" disabled={false} focusRipple={true} focusVisibleClassName="MuiButton-focusVisible-93" id="button-messageitem-1" onClick={[Function: onClick]} component="button" type="button">
            <ButtonBase className="MuiButton-root-74 MuiButton-text-76 MuiButton-flat-79 MuiButton-sizeSmall-97 MessageItem-cardclearbutton-1 MuiCardActions-action-73" disabled={false} focusRipple={true} focusVisibleClassName="MuiButton-focusVisible-93" id="button-messageitem-1" onClick={[Function: onClick]} component="button" type="button" classes={{...}} centerRipple={false} disableRipple={false} disableTouchRipple={false} tabIndex="0">
              <button className="MuiButtonBase-root-100 MuiButton-root-74 MuiButton-text-76 MuiButton-flat-79 MuiButton-sizeSmall-97 MessageItem-cardclearbutton-1 MuiCardActions-action-73" onBlur={[Function (anonymous)]} onFocus={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} onKeyUp={[Function (anonymous)]} onMouseDown={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} onMouseUp={[Function (anonymous)]} onTouchEnd={[Function (anonymous)]} onTouchMove={[Function (anonymous)]} onTouchStart={[Function (anonymous)]} onContextMenu={[Function (anonymous)]} tabIndex="0" type="button" disabled={false} id="button-messageitem-1" onClick={[Function: onClick]}>
                <span className="MuiButton-label-75">
                  Clear
                </span>
                <NoSsr defer={false} fallback={{...}}>
                  <WithStyles(TouchRipple) innerRef={[Function (anonymous)]} center={false}>
                    <TouchRipple center={false} classes={{...}}>
                      <TransitionGroup component="span" enter={true} exit={true} className="MuiTouchRipple-root-103" childFactory={[Function: childFactory]}>
                        <span className="MuiTouchRipple-root-103" />
                      </TransitionGroup>
                    </TouchRipple>
                  </WithStyles(TouchRipple)>
                </NoSsr>
              </button>
            </ButtonBase>
          </WithStyles(ButtonBase)>
        </Button>
      </WithStyles(Button)>
      <Button id="button-messageitem-1" size="small" className="MessageItem-cardclearbutton-1 MuiCardActions-action-73" onClick={[Function: onClick]} classes={{...}} color="default" component="button" disabled={false} disableFocusRipple={false} fullWidth={false} mini={false} type="button" variant="text">
        <WithStyles(ButtonBase) className="MuiButton-root-74 MuiButton-text-76 MuiButton-flat-79 MuiButton-sizeSmall-97 MessageItem-cardclearbutton-1 MuiCardActions-action-73" disabled={false} focusRipple={true} focusVisibleClassName="MuiButton-focusVisible-93" id="button-messageitem-1" onClick={[Function: onClick]} component="button" type="button">
          <ButtonBase className="MuiButton-root-74 MuiButton-text-76 MuiButton-flat-79 MuiButton-sizeSmall-97 MessageItem-cardclearbutton-1 MuiCardActions-action-73" disabled={false} focusRipple={true} focusVisibleClassName="MuiButton-focusVisible-93" id="button-messageitem-1" onClick={[Function: onClick]} component="button" type="button" classes={{...}} centerRipple={false} disableRipple={false} disableTouchRipple={false} tabIndex="0">
            <button className="MuiButtonBase-root-100 MuiButton-root-74 MuiButton-text-76 MuiButton-flat-79 MuiButton-sizeSmall-97 MessageItem-cardclearbutton-1 MuiCardActions-action-73" onBlur={[Function (anonymous)]} onFocus={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} onKeyUp={[Function (anonymous)]} onMouseDown={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} onMouseUp={[Function (anonymous)]} onTouchEnd={[Function (anonymous)]} onTouchMove={[Function (anonymous)]} onTouchStart={[Function (anonymous)]} onContextMenu={[Function (anonymous)]} tabIndex="0" type="button" disabled={false} id="button-messageitem-1" onClick={[Function: onClick]}>
              <span className="MuiButton-label-75">
                Clear
              </span>
              <NoSsr defer={false} fallback={{...}}>
                <WithStyles(TouchRipple) innerRef={[Function (anonymous)]} center={false}>
                  <TouchRipple center={false} classes={{...}}>
                    <TransitionGroup component="span" enter={true} exit={true} className="MuiTouchRipple-root-103" childFactory={[Function: childFactory]}>
                      <span className="MuiTouchRipple-root-103" />
                    </TransitionGroup>
                  </TouchRipple>
                </WithStyles(TouchRipple)>
              </NoSsr>
            </button>
          </ButtonBase>
        </WithStyles(ButtonBase)>
      </Button>
      <WithStyles(ButtonBase) className="MuiButton-root-74 MuiButton-text-76 MuiButton-flat-79 MuiButton-sizeSmall-97 MessageItem-cardclearbutton-1 MuiCardActions-action-73" disabled={false} focusRipple={true} focusVisibleClassName="MuiButton-focusVisible-93" id="button-messageitem-1" onClick={[Function: onClick]} component="button" type="button">
        <ButtonBase className="MuiButton-root-74 MuiButton-text-76 MuiButton-flat-79 MuiButton-sizeSmall-97 MessageItem-cardclearbutton-1 MuiCardActions-action-73" disabled={false} focusRipple={true} focusVisibleClassName="MuiButton-focusVisible-93" id="button-messageitem-1" onClick={[Function: onClick]} component="button" type="button" classes={{...}} centerRipple={false} disableRipple={false} disableTouchRipple={false} tabIndex="0">
          <button className="MuiButtonBase-root-100 MuiButton-root-74 MuiButton-text-76 MuiButton-flat-79 MuiButton-sizeSmall-97 MessageItem-cardclearbutton-1 MuiCardActions-action-73" onBlur={[Function (anonymous)]} onFocus={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} onKeyUp={[Function (anonymous)]} onMouseDown={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} onMouseUp={[Function (anonymous)]} onTouchEnd={[Function (anonymous)]} onTouchMove={[Function (anonymous)]} onTouchStart={[Function (anonymous)]} onContextMenu={[Function (anonymous)]} tabIndex="0" type="button" disabled={false} id="button-messageitem-1" onClick={[Function: onClick]}>
            <span className="MuiButton-label-75">
              Clear
            </span>
            <NoSsr defer={false} fallback={{...}}>
              <WithStyles(TouchRipple) innerRef={[Function (anonymous)]} center={false}>
                <TouchRipple center={false} classes={{...}}>
                  <TransitionGroup component="span" enter={true} exit={true} className="MuiTouchRipple-root-103" childFactory={[Function: childFactory]}>
                    <span className="MuiTouchRipple-root-103" />
                  </TransitionGroup>
                </TouchRipple>
              </WithStyles(TouchRipple)>
            </NoSsr>
          </button>
        </ButtonBase>
      </WithStyles(ButtonBase)>
      <ButtonBase className="MuiButton-root-74 MuiButton-text-76 MuiButton-flat-79 MuiButton-sizeSmall-97 MessageItem-cardclearbutton-1 MuiCardActions-action-73" disabled={false} focusRipple={true} focusVisibleClassName="MuiButton-focusVisible-93" id="button-messageitem-1" onClick={[Function: onClick]} component="button" type="button" classes={{...}} centerRipple={false} disableRipple={false} disableTouchRipple={false} tabIndex="0">
        <button className="MuiButtonBase-root-100 MuiButton-root-74 MuiButton-text-76 MuiButton-flat-79 MuiButton-sizeSmall-97 MessageItem-cardclearbutton-1 MuiCardActions-action-73" onBlur={[Function (anonymous)]} onFocus={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} onKeyUp={[Function (anonymous)]} onMouseDown={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} onMouseUp={[Function (anonymous)]} onTouchEnd={[Function (anonymous)]} onTouchMove={[Function (anonymous)]} onTouchStart={[Function (anonymous)]} onContextMenu={[Function (anonymous)]} tabIndex="0" type="button" disabled={false} id="button-messageitem-1" onClick={[Function: onClick]}>
          <span className="MuiButton-label-75">
            Clear
          </span>
          <NoSsr defer={false} fallback={{...}}>
            <WithStyles(TouchRipple) innerRef={[Function (anonymous)]} center={false}>
              <TouchRipple center={false} classes={{...}}>
                <TransitionGroup component="span" enter={true} exit={true} className="MuiTouchRipple-root-103" childFactory={[Function: childFactory]}>
                  <span className="MuiTouchRipple-root-103" />
                </TransitionGroup>
              </TouchRipple>
            </WithStyles(TouchRipple)>
          </NoSsr>
        </button>
      </ButtonBase>
      <button className="MuiButtonBase-root-100 MuiButton-root-74 MuiButton-text-76 MuiButton-flat-79 MuiButton-sizeSmall-97 MessageItem-cardclearbutton-1 MuiCardActions-action-73" onBlur={[Function (anonymous)]} onFocus={[Function (anonymous)]} onKeyDown={[Function (anonymous)]} onKeyUp={[Function (anonymous)]} onMouseDown={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} onMouseUp={[Function (anonymous)]} onTouchEnd={[Function (anonymous)]} onTouchMove={[Function (anonymous)]} onTouchStart={[Function (anonymous)]} onContextMenu={[Function (anonymous)]} tabIndex="0" type="button" disabled={false} id="button-messageitem-1" onClick={[Function: onClick]}>
        <span className="MuiButton-label-75">
          Clear
        </span>
        <NoSsr defer={false} fallback={{...}}>
          <WithStyles(TouchRipple) innerRef={[Function (anonymous)]} center={false}>
            <TouchRipple center={false} classes={{...}}>
              <TransitionGroup component="span" enter={true} exit={true} className="MuiTouchRipple-root-103" childFactory={[Function: childFactory]}>
                <span className="MuiTouchRipple-root-103" />
              </TransitionGroup>
            </TouchRipple>
          </WithStyles(TouchRipple)>
        </NoSsr>
      </button>

（Material-ui 为一个简单的按钮放置了大量代码，对吧？）

我也试过wrapper.find("button");了，什么也没做，不管我总是收到错误信息：Method “html” is meant to be run on 1 node. 0 found instead..

标签： javascriptreactjstestingjestjsenzyme