Reactjs 如何使用Ezyme ShallowRapper查找作为道具存储在另一个React组件中的React组件？

我有一个jest/Ezyme测试，它围绕一个组件创建一个浅层说唱者，找到一个指定的语义ui react按钮（通过id），模拟点击按钮，然后查看点击是否切换了某些内容

示例JSX：

<Popup
  trigger={<Button onClick={this.toggleShowThing} id="special-btn">a button</Button>}
  content="Popup Words"
/>
{this.state.showThing &&
  <div className="special-thing">The Thing's Words</div>
}

{this.state.showThing&&
这东西的文字
}

样本测试：

it('shows the thing when the button is clicked', () => {
  const wrapper = shallow(<MyComponent />);
  wrapper.find('#special-btn').simulate('click', { preventDefault() {} });
  expect(wrapper.find('.special-thing').exists()).toBe(true);
});

it（'单击按钮时显示内容'，（）=>{
常量包装器=浅（）；
find（'#special btn'）.simulate（'click'，{preventDefault（）{}}）；
expect（wrapper.find（'.special thing'）.exists（））.toBe（true）；
});

我刚按下按钮时，这个测试就成功了。当我添加弹出窗口并将按钮放入触发器道具时，我收到一个错误，因为无法找到特殊btn

错误：方法“props”只能在单个节点上运行。改为找到0

组件的快照显示弹出窗口如下所示：

<Popup 
  content="Popup Words"
  on="hover"
  position="top left"
  trigger={
    <Button
      id="special-btn"
      onClick={[Function]}
    >
      a button
    </Button>
  }
/>

---

我需要我的测试才能再次工作。如何在测试中再次访问#特殊btn，以便调用.simulate（'click'）？

问题是您无法执行此操作。你需要重写你的测试。您的按钮现在被一个

弹出窗口

组件包装，因此您无法访问它。但您可以将选择器移动到

弹出窗口

，并测试单击弹出窗口是否触发所需更改。别无选择

// JSX
<Popup
  trigger={<Button onClick={this.toggleShowThing} id="special-btn">a button</Button>}
  content="Popup Words"
  id="popup"
/>
{this.state.showThing &&
  <div className="special-thing">The Thing's Words</div>
}

// test
it('shows the thing when the button is clicked', () => {
  const wrapper = shallow(<MyComponent />);
  wrapper.find('#popup').simulate('click', { preventDefault() {} });
  expect(wrapper.find('.special-thing').exists()).toBe(true);
});

//JSX
{this.state.showThing&&
这东西的文字
}
//试验
它（'单击按钮时显示内容'，（）=>{
常量包装器=浅（）；
find（'#popup'）.simulate（'click'，{preventDefault（）{}}）；
expect（wrapper.find（'.special thing'）.exists（））.toBe（true）；
});

假设Popup是已经测试过的第三方组件，我将采用以下方法进行测试：

（1） 找到弹出窗口并检查

触发器

prop按钮的

onClick

prop是否为

componentWrapper.instance（）。toggleShowThing

（2） 另外，将

this.state.showThing

设置为false，并验证没有呈现具有className special thing的div；将

this.state.showThing

设置为true，并验证是否呈现了它

---

（*）

这个。toggleShowThing

也应该单独测试。

这对我来说很有效，尽管没有相关文档：

从“酶”导入{ShallowWrapper}；
它（'单击按钮时显示内容'，（）=>{
常量包装器=浅（）；
const按钮=新浅层振打器(
wrapper.find（'Popup'）.prop（'trigger'），wrapper
);
模拟（'click'，{preventDefault（）{}}）；
expect（wrapper.find（'.special thing'）.exists（））.toBe（true）；
});

换言之：

查找

弹出窗口

组件

获取在其

触发器中渲染的组件。请注意，这还不是一个浅包装器，因此还没有花哨的API

使用

ShallowRapper

手动创建包装器（传递第二个参数很重要）

现在，您可以访问所有酶API与按钮进行交互

注意，您似乎可以避免使用构造函数，而是使用实用方法（也没有文档记录）：

const-button=wrapper.wrap（wrapper.find（'Popup'）.prop（'trigger'））；

我测试了您的建议，不幸的是它不起作用。ShallowRapper能够找到弹出窗口，但模拟的单击事件可能不会传播到实际按钮，因此不会调用此按钮。toggleShowThing（）。我猜这是来自浅层渲染？@FrostyFox也许你应该尝试挂载组件而不是浅层渲染。浅层渲染不会将事件向下传播到组件。