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(
     <Button onClick={() => counter++}>
          A Button
     </Button>
);
component.simulate('click');

Answer 2

如果要测试MyButton，则应将其导入并使用：

import MyButton from './some-button';
const component = shallow(<MyButton />);
component.find(MyButton).simulate('click');

但是，您正在使用的是您不导入的文件，还是在真实代码中使用的文件？

模拟单击样式化的组件测试

2 个答案: