Search code examples
javascriptreactjsenzymestorybook

Enzyme Click on Button Inside Component Inside Component


Im working on a React Javascript Storybook right now and Im trying to figure out how to get enzyme to click a button inside of a component inside a component. So in other words this is the structure

<Component 1>
   <Component 2>
    <Button>
   </Component 2>
</Component 1>

And I want to click on the Button inside of compoenent 2. So far I have this

storesOf("Press the button",module).add("Button press:,() => {
    let output;
    specs(() => describe('clicked',function () {
        it("Should do the thing",function () {
            output = mount(<Component 1/>);
            output.find("Button").at(0).simulate("click")
        })
    }));

    const Inst = () => output.instance();
    return <Inst/>;
});

Does anyone have any advice? I should also add that as of current it does not find any buttons to click


Solution

  • As per Enzyme documentation you can use a React component constructor as your selector. You can do something like this:

    output = mount(<Component1 />);
    output.find(Component2).find(Button).simulate("click")