react-native-web jest error

“react”: “^16.8.4”, “react-native”: “0.55.4”, “react-native-web”: “^0.9.x”, /// NOTE: using RNW “react-native-svg”: “6.0.0”,

react-native-svg seems to be working fine for Android and Web so far but when running my Jest test I am getting the following error

● Test suite failed to run

TypeError: (0 , _reactNativeWeb.requireNativeComponent) is not a function

  1 | import React from 'react';
  2 |
> 3 | import Svg, { Path, Rect } from 'react-native-svg';
    | ^
  4 |
  5 | import { numPropType, stringPropType } from '../../prop-types/propTypes';
  6 |

  at Object.<anonymous> (node_modules/react-native-svg/elements/Svg.js:99:23)
  at Object.<anonymous> (node_modules/react-native-svg/index.js:7:1)
  at Object.<anonymous> (src/common/assets/edit-log-icons/clone-icon.js:3:1)

I tried to mock react-native-svg but it doesn’t seem to be working. I tried react-native-svg-mock to no avail and I also tried several different variations online. The most current of which is

jest.mock('react-native-svg', () => {
    const React = require('react');
    const ReactNativeSvg = jest.genMockFromModule('react-native-svg');

    const svgElementMockGenerator = (name, propTypes) => {
        function SvgMock() {
            return (
                React.createElement(name, null, null)
            )
        }

        SvgMock.displayName = name
        SvgMock.propTypes = propTypes

        return SvgMock
    };

    const Svg = svgElementMockGenerator('Svg', ReactNativeSvg.Svg.propTypes);

    Svg.Rect = svgElementMockGenerator('Rect', ReactNativeSvg.Rect.propTypes);
    Svg.LinearGradient = svgElementMockGenerator(
        'LinearGradient',
        ReactNativeSvg.LinearGradient.propTypes
    );
    Svg.Path = svgElementMockGenerator('Path', ReactNativeSvg.Path.propTypes);
    Svg.Symbol = svgElementMockGenerator('Symbol', ReactNativeSvg.Symbol.propTypes);
    Svg.Use = svgElementMockGenerator('Use', ReactNativeSvg.Use.propTypes);
    Svg.Stop = svgElementMockGenerator('Stop', ReactNativeSvg.Stop.propTypes);
    Svg.Defs = svgElementMockGenerator('Defs', ReactNativeSvg.Defs.propTypes);

    return Svg;
});

using this mock seems to make the error SLIGHTLY different, in that it doesn’t point to the import.

● Test suite failed to run

TypeError: (0 , _reactNativeWeb.requireNativeComponent) is not a function

  at Object.<anonymous> (node_modules/react-native-svg/elements/Svg.js:146:64)
  at Object.<anonymous> (node_modules/react-native-svg/index.js:142:35)
  at Object.user:/home/thorakmedichi/Development/Projects/myProject/node_modules/react-native-svg/index.js: (config/initTest.js:16:29)

Any help would be appreciated.

[MillerGregor]

as @Sliverb suggested, bakerface/react-native-svg-web fixed my jest tests… but jest.mock() didn’t work for me.

I had to make two additions to my jest config:

{
  moduleNameMapper: {
    'react-native-svg': 'react-native-svg-web',
  },
  transformIgnorePatterns: [
    'node_modules/(?!(react-native|react-native-svg-web|react-native-something-else)/)'
  ]
}

[merrywhether]

This isn’t covered in the docs, but you need to tell Jest to prefer .web.js files over .js files so that it will behave properly when it encounters the dynamic entry point

  moduleNameMapper: {
    '^react-native$': 'react-native-web',
  },
  moduleFileExtensions: ['...', 'web.js', 'js', '...'],