javascript - Is there anyway to inject components into bigger react components?

Question

Let's say I have a Post component. This component is used heavily across my code. And thus it needs to handle the onDelete and onEdit inside it so that I don't have to repeat the code again and again.

But it needs to be tested. So I need to mock onDelete and onEdit.

This is achievable by writing the component in a file, and connecting it with the backend in another.

post/
  post.tsx      # just the UI
  index.tsx     # post.tsx but connected with the store or backend

and in tests, I can import post.tsx and mock the handlers.

---

Now let's say I have a PostList component that also needs to be tested. However this PostList imports Post from index.tsx which is connected to the real handlers. And thus I lost the ability to mock the handlers for Post.

Is there anyway to inject Post into PostList like how we do in OOP?

question from:https://stackoverflow.com/questions/65921175/is-there-anyway-to-inject-components-into-bigger-react-components

Answer 1

Waitting for answers