Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Mocking the custom HOC component during testing

See original GitHub issue

Ask your Question

Hello everybody! I am new to this testing library so I have a question related to mock implementation of custom HOC components that wrap React-Native components.

For example: I created Typography component that is making some changes above the <Text> core component of react-native. I am using it in MainScreen.tsx component and want to test that screen. And when it comes to the testing, the render function of react-native-testing-library cannot access the texts on the MainScreen view until I mock the implementation of Typography component.

My question is: The Typography component will be used in all cases when we have to render the text on the screen. I think it is not the good way of testing if we have to mock it for every test when we want to access some text. Is there any other solution to make this component accessible for any render of the component during the testing or maybe reusable part of code to mock this component?

Issue Analytics

State:
Created 2 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

mussaiin-spotnanacommented, Aug 5, 2021

Hi @thymikee! I’ve gone through the all my unit tests using texts and some other npm libraries and was wrong about that issue. Sorry for taking your time and thank you a lot! The tests was failing due to the another issue (structure of the passing data was changed). I fixed that and then thought that it is related to mocking of custom components, applied the mocks just to be sure and didn’t test the first solution separately, but all together. Tests passed successfully and it seemed to me that the issue was strictly in the mock implementation of our custom components.

I thought about that because of the issue that appeared before while I was unit testing usages of my Custom Bottom Drawer component and forgot that for the drawer we were using not core component but separate library @ react-native-modal.

So briefly: As you answered before, all the core components of react-native are accessible in unit testing, if it is not a separate npm library. I removed that mock implementations for Typography and tests work fine. The question is totally closed.

0reactions

thymikeecommented, Aug 5, 2021

Also, .toBeInDocument() matcher is not available in jest-native: https://github.com/testing-library/jest-native/blob/main/src/index.js nor is it a default Jest matcher

Top Results From Across the Web

Mocking React higher-order components (HOC) with Jest

The mocked Higher-order Components in React can simplify and speed up the test runs for Component rendering and testing especially in the ...

Mocking a higher order component with jest - Stack Overflow

Mocking your HOC should look like this: jest.mock('../your/HOC', () => () => Component => props => <Component {...props} /> ).

Guide of Testing React Components with Hooks & Mocks

A step-by-step guide to using hooks and mocks to test React components. ... wrapped in HOC or for use cases where you have...

Mocking a React higher order component (HOC) with Jest mock

Below is the snippet for mocking the HOC in your tests: jest.mock("react-geolocated", () => { return { geolocated: function(hocConf) {

Testing React components - Apollo GraphQL Docs

The MockedProvider component enables you to define mock responses for individual queries that are executed in your test. This means your test doesn't...