Rashmi Singh
4 min readMar 22, 2022

--

Mocking in React Native unit test cases

If you know me directly, you would also know how proudly biased for unit testing(courtesy my mentor… his fault. He sowed the seeds!) I am. And then I read these books on clean code by Robert Martin and my beliefs were cast in iron. It’s been 6 years of hard core development and unit testing for me now, and I couldn’t stress on the level of confidence it brings when I take a test driven approach right from the first line of code I write. After all these years, I join this project where my team is developing in react native, and they are stuck because mocking is apparently not working in their react native components. I’m new to react native, but I have done truck loads of unit testing for one of my other react projects, and I couldn’t believe mocks were not working here. So, I dropped everything else to unblock my team here. What’s the first step? go online and look at the samples for react native mocks… I went to these resources and found nothing:

  1. React native official website: They have one paragraph on mocking(theoretical) and they redirect to Jest official website for further details.
  2. Jest official website: It has samples, so I try to make those samples run in my react native project, and they don’t work! So, I assume those are specific to react js (somehow that is not clear from the documentation)
  3. Youtube(finally!): Here we videos flooded with unit testing, but for react js. React native unit testing videos were not covering mocks. One video was very close to a mocking scenario, but the guy said “We could mock, but it is complex… so, let’s just write an integration test case”!
  4. Facebook github sample for react native: One sample test case file for react native, which doesn’t cover mocking
  5. Pluralsight(thankfully I have a paid subscription): Like the others I didn’t find any help on mocking here as well.

If you are here and you are wondering what’s the point of mentioning all these failures here? I’m expecting someone from react native team or some content creator on any of the above four platforms to take this as a feedback and improves the documentation so no one else faces the same issue like I did. Until then, hope what I’m going to mention now, helps. I’m assuming you are familiar with the basic concepts of mocking and unit testing. If not, apart from all the content online, hope this blog of mine helps: Unit testing ingrained as a habit, rather than a methodology | LinkedIn

Example: Say you have a component to unit test (Component1), which in turn calls another component (Component2). And this is how it looks like:

If you are unit testing the above component, you would want to unit test the function “someComplexLogic” and not want your test execution to enter into Component2. So, you mock Component2, and this is how you do it:

All the magic lies in line 8(image above), where we say jest.doMock() and then mock the entire component after passing the path. No other syntax I tried worked for me… Using a direct jest.fn() also doesn’t work here in react native.

Say, you were doing some state manipulation and you want to manipulate the sate properties in your test case :

You want to mock the useSelector call in your test case. This is how you would do it:

I’m not going into the details of jest here, because their own official documentation is enough for that… I thought this blog was imperative because of the lack of basic online content on the structure of mocking external calls in react native.

Hope this helps! thank you for bearing with me.

--

--