1

I have a parent component with a button that when clicked launches a modal window child component. A request is made from the child component when it first renders, and then response data is saved to local state, e.g.

useEffect(() => {
  const response = await getData(id);
  setData(response.data)
  ...
}, []);

In the parent component I am testing if the modal window launches - to do this I can just test that the dom element is present after the button is clicked, great. However when the modal window launches the request is made from the child component resulting in the error:

Error: connect ECONNREFUSED 127.0.0.1:80

There seem to be two options:

1/ Use msw to provide a mock endpoint for the request. However due to the state being updated it results in the following error:

Warning: An update to Component inside a test was not wrapped in act(...)

2/ Mock the entire child component using jest.mock(). This is the logical thing to do as I am testing the parent component and I do not care about the child. However from what I have read this is not the RTL way of doing things.

This seems like it must really common testing scenario, but I haven't found a solution so any advice on the best way to do this would be appreciated.

J_P
  • 599
  • 1
  • 9
  • 20

2 Answers2

0

Stub data from requests to 3rd parties if your writing good tests, i.e. data your child is getting... or if you strictly unit testing then mock the child.

Depends on the type of test you want. Sandi Metz has a nice clear why of explaining what you should be testing. I don't like the mock the child approach as it leads to fragile tests - better to test behaviour i.e. that data back from your stub has been saved to state / updated somewhere.

edit: mock the child component and set an expectation that it receives a query/command, or pivot to testing the child and setup mock state of the parent.

Jeremy
  • 1,170
  • 9
  • 26
  • Thanks, but I'm looking for a practical response related to RTL. As I wrote one of the options I have tried is mocking the request, but this leads to an error due to the state being updated in the child component. I don't think checking the child's state is practical - and what if there is a chain of child components - testing each of these would be crazy. – J_P Aug 04 '22 at 16:01
  • Think you need to clarify what you are testing, from info available it sounds like its your child that is having an incoming message, the outgoing message to child is not important to this test. rtl wraps in act so its not the parent triggering the act error - its the child, so you need to mock the child and have an expectation that it receives xyz. – Jeremy Aug 05 '22 at 09:26
  • 1
    Yep. I have come to the conclusion that mocking the child component is the solution here even though it is not following the RTL way of integration testing. – J_P Aug 05 '22 at 09:53
0

In this scenario it seems the best option is just to simply mock the child component with Jest as we do not care about it's internals, even though this goes against RTL's best practises.

J_P
  • 599
  • 1
  • 9
  • 20