Running jest tests rendering components created with createText() cause tests to fail with an exception

[tonyseing]

I'm writing a jest test case that renders a Text component created from the following line of code: export const Text = createText<IotTheme>();

I receive a resulting error:

  TypeError: funcsMap[propKey] is not a function

      at node_modules/@shopify/restyle/dist/composeRestyleFunctions.js:33:137
          at Array.reduce (<anonymous>)
      at Object.buildStyle (node_modules/@shopify/restyle/dist/composeRestyleFunctions.js:33:41)
      at Object.func [as variant] (node_modules/@shopify/restyle/dist/createVariant.js:36:70)
      at node_modules/@shopify/restyle/dist/composeRestyleFunctions.js:33:137
          at Array.reduce (<anonymous>)
      at Object.buildStyle (node_modules/@shopify/restyle/dist/composeRestyleFunctions.js:33:41)
      at node_modules/@shopify/restyle/dist/hooks/useRestyle.js:48:45
      at mountMemo (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6877:19)
      at Object.useMemo (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7213:16)

[timgremore]

@tonyseing I just bumped into this same error. Did you happen to find a solution?

[tonyseing]

@timgremore I added a mock in my jest tests. Found this solution in another issue ticket here but it suited my case perfectly for the timebeing:

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;

[timgremore]

@tonyseing This ended up being an invalid style prop (background where backgroundColor was expected) for me.

[tonyseing]

@timgremore thanks for the tip! I'll give this another look-see

[anthlasserre]

On my side I figure it out by removing transform style property in some of my variants in textVariant.

[fortmarek]

Is this still an issue? If so, could you provide full reproduction steps?

[ellited]

For me helped answer from this closed ticket: #102 (comment)

[9lan]

For me, I was moving the RestyleThemeProvider on top of another ThemeProvider.

Example:

import {ThemeProvider as RestyleThemeProvider} from '@shopify/restyle';
import {ThemeProvider as AnotherThemeProvider} from 'another-theme-provider';

<RestyleThemeProvider>
   <AnotherThemeProvider>
     // code here
  </AnotherThemeProvider>
</RestyleThemeProvider>