how to find children when they pass through another component?

[tdfairbrother]

I have found a difference between the JS and Reason versions of enzyme testing. In the following JS example, I can find ANY of the children of a shallowly rendered component. In the second example, it doesn't matter that I have the headers inside of an intermediate container .

describe('shallow find test', () => {
  it('renders 2 headers', () => {
    const wrapper = shallow(
      <div>
        <div className="header">
          Test
        </div>
        <div className="header">
          Test2
        </div>
      </div>
    );
    expect(wrapper.find('.header').length).toEqual(2);
  });

  it('renders 2 headers', () => {
    const ThisWontBreakTheFindForChildrenOfThis = ({children}) => (
      <div>{children}</div>
    );
    const wrapper = shallow(
      <ThisWontBreakTheFindForChildrenOfThis>
        <div>
          <div className="header">
            Test
          </div>
          <div className="header">
            Test2
          </div>
        </div>
      </ThisWontBreakTheFindForChildrenOfThis>
    );
    expect(wrapper.find('.header').length).toEqual(2);
  });
});

In the following reason-react test, the second test does not behave the same as the JS version. It does not seem to find the header elements that are rendered through the component.

open Jest;

Enzyme.configureEnzyme(Enzyme.react_16_adapter());

module Container {
  let component = ReasonReact.statelessComponent("Example1");
  let make = (_children) => {
    ...component,
    render: _self =>
      <div>
        <div className="header">
          (ReasonReact.string("Test"))
        </div>
        <div className="header">
          (ReasonReact.string("Test2"))
        </div>
      </div>
  };
};

module ThisWillBreakTheFindForChildrenOfThis {
  let component = ReasonReact.statelessComponent("Example2");
  let make = (children) => {
    ...component,
    render: _self =>
     ReasonReact.createDomElement(
       "div",
       ~props={"className": ""},
       children
     )
  };
};

/* TODO -- this container wont allow me to find the inner divs*/
module ContainerWithWrap {
  let component = ReasonReact.statelessComponent("Example3");
  let make = (_children) => {
    ...component,
    render: _self =>
      <ThisWillBreakTheFindForChildrenOfThis>
        <div>
          <div className="header">
            (ReasonReact.string("Test"))
          </div>
          <div className="header">
            (ReasonReact.string("Test2"))
          </div>
        </div>
      </ThisWillBreakTheFindForChildrenOfThis>
  };
};

let setup = () =>
  Enzyme.shallow(<Container />);

let setup2 = () =>
  Enzyme.shallow(<ContainerWithWrap />);

let header = (wrapper) =>
  wrapper
    |> Enzyme.find(".header");

describe("shallow find test", () => {
  open Expect;

  test("renders 2 headers", () => {
    let wrapper = setup(());
    let headerNodes = wrapper |> header;
    expect(Enzyme.length(headerNodes)) |> toBe(2)
  });

  test("DOESNT render 2 headers", () => {
    let wrapper = setup2(());
    let headerNodes = wrapper |> header;
    expect(Enzyme.length(headerNodes)) |> toBe(0)
  });
});

Is there a way to do what I am trying to do?

[erykpiast]

I'm trying to refresh this repository. @tdfairbrother, is your issue still preset? Did you find any workaround for it in the meantime?

[tdfairbrother]

No, I ended up using a different library.

[erykpiast]

Oh, I see. Which one? You mean different ReasonML bindings or a different testing library?

[tdfairbrother]

To another library https://testing-library.com/docs/bs-react-testing-library/intro

…

On Mon, Mar 2, 2020 at 10:42 PM Eryk Napierała ***@***.***> wrote: Oh, I see. Which one? You mean different ReasonML bindings or a different testing library? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#11?email_source=notifications&email_token=AAEX5MFNV4BV2VOPBNQD42TRFOSVDA5CNFSM4FDBCIEKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENPE7JI#issuecomment-593383333>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEX5MD6AXRYWIWLNH5GOX3RFOSVDANCNFSM4FDBCIEA> .

-- Tim Fairbrother

_______________________________________________________________________ PictureBoss Programming | Web Hosting | E-commerce Solutions | Web Applications http://www.pictureboss.com http://www.aus-e.com Mob: +61 414 742 631