How do I make a mock component that works with @test-library/react-native

[dcorbin]

I have some production code that looks something like this:

function Foo(props: {name: string, factory: Factory}) {
   const builtThing = factory.create()
   
   return <Bar thing={builtThing}>
      <Zab testID="baz" name={props.name}/>
      </Bar>;
}

Bar is a native component, and must be mocked. I can call render('<Foo name={"fred"} factory={factory}/> that allow me to test that Bar is passed the correct builtThing. But having done that, I want to test that the children of Bar are correctly rendered.

I have yet to find a mocking system/tools that will let me test Bar and Baz. This seems like basic problem that I'd expect be solvable with this library (+ maybe an optional mock component). Any suggestions how to go about this?

[mdjastrzebski]

RNTL is not providing mocking, Jest is. For your case you could mock Bar in a way to renders it children e.g. in a View.

https://jestjs.io/docs/mock-functions