模拟点击样式组件测试

Question

我有一个样式按钮：

const MyButton = styled.button`...`

我用onClick道具渲染它：

<MyButton onClick={props.onClick}>A Button</MyButton>

在我的按钮测试文件中，我使用酶来测试onClick（样式按钮导入为“按钮”）：

let counter = 0;

const component = shallow(

     <Button onClick={() => counter++}>

          A Button

     </Button>

);

component.find(Button).simulate('click');

在控制台中我得到： Method “simulate” is meant to be run on 1 node. 0 found instead.

使用调试时，component.debug()我看到元素是<styled.button>...</styled.button> 我尝试更改我find()的接收styled.button甚至添加一个类名，我在调试时可以看到该类名，但似乎没有得到元素。

如何找到元素并在其上模拟事件？谢谢

Answer 1

当component.find(Button)您试图在按钮内找到一个按钮时，您的示例中并非如此。去吧：let counter = 0;const component = shallow(&nbsp; &nbsp; &nbsp;<Button onClick={() => counter++}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; A Button&nbsp; &nbsp; &nbsp;</Button>);component.simulate('click');

Answer 2

如果您正在测试 MyButton，那么您应该导入它并使用它：import MyButton from './some-button';const component = shallow(<MyButton />);component.find(MyButton).simulate('click');但是，您是在使用未导入的还是在实际代码中使用的？