模拟点击样式组件测试

Question

I have a styled Button:

const MyButton = styled.button`...`

And I render it with an onClick prop:

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

In my tests files for the button I use Enzyme to test the onClick (the styled button is imported as 'button'):

let counter = 0;
const component = shallow(
     <Button onClick={() => counter++}>
          A Button
     </Button>
);
component.find(Button).simulate('click');

In the console I get: Method “simulate” is meant to be run on 1 node. 0 found instead. Method “simulate” is meant to be run on 1 node. 0 found instead.

When debugging using component.debug() I see the element is <styled.button>...</styled.button> I tried changing my find() to receive styled.button and even adding a class name which I can see when debugging but nothing seems to get the element.

How can I find the element and simulate events on it? Thank you

Answer 1

With component.find(Button) you're trying to find a button inside a button which is not the case in your example. Just go for:

let counter = 0;
const component = shallow(
     <Button onClick={() => counter++}>
          A Button
     </Button>
);
component.simulate('click');

Answer 2

If you are testing MyButton then you should import it, and use it:

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

You are however, using which you're not importing, or using in the real code?