Shopify / restyle

A type-enforced system for building UI components in React Native with TypeScript.

Home Page:https://shopify.github.io/restyle/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to mock restyle to test with jest and @testing-library/react-native?

DeniferSantiago opened this issue · comments

I am trying to test a component but I am getting an error in restyle. The error is caused by the use of the createText function that I use to create a text component that uses the theme of the app, here I will leave you part of the error that jest shows me.

console.error
    The above error occurred in the <ForwardRef> component:
    
        at C:\Users\user\project-mobile\node_modules\@shopify\restyle\dist\createRestyleComponent.js:23:47
        at Text (C:\Users\user\project-mobile\src\components\Text2.tsx:31:3)
        at View
        at View (C:\Users\user\project-mobile\node_modules\react-native\jest\mockComponent.js:19:18)     
        at C:\Users\user\project-mobile\node_modules\@shopify\restyle\dist\createRestyleComponent.js:23:47

So I think maybe it's necessary to mock up the restyle behavior

I would suggest that you add the complete error message as well as a snippet with the code you're trying to run. Otherwise, it is very hard to tell what you are trying to achieve.

I am sorry I was not so specific, but I have solved it with the following configuration:
jest.setup.js

jest.mock('@shopify/restyle', () => {
  const RealModule = jest.requireActual('@shopify/restyle')
  const RN = jest.requireActual('react-native')
  RealModule.createText = () => RN.Text
  RealModule.createBox = () => RN.View
  RealModule.createRestyleComponent = (f, c) => c || RN.View
  return RealModule
})