Jest Snapshot: Warning: Native component for "RNSVGSvgView" does not exist

Hello guys,

So I’m testing my RN 0.33.1 with Jest, as follows:

import 'react-native';
import React from 'react';
import svgElementMockGenerator from '../__mocks__/svgElementMockGenerator';
import ReactTestRenderer from 'react-test-renderer';
const Headline = require('../Headline').default;
const Heart = require('../Heart').default;

// eslint-disable-next-line no-undef
jest.mock('react-native-svg', () => {
  // eslint-disable-next-line no-undef
  const ReactNativeSvg = jest.genMockFromModule('react-native-svg');
  return {
    Svg            : svgElementMockGenerator('Svg', ReactNativeSvg.Svg.propType),
    LinearGradient : svgElementMockGenerator('LinearGradient', ReactNativeSvg.LinearGradient.propType),
    Path           : svgElementMockGenerator('Path', ReactNativeSvg.Path.propType),
    Symbol         : svgElementMockGenerator('Symbol', ReactNativeSvg.Symbol.propType),
    Use            : svgElementMockGenerator('Use', ReactNativeSvg.Use.propType),
    Stop           : svgElementMockGenerator('Stop', ReactNativeSvg.Stop.propType),
    Defs           : svgElementMockGenerator('Defs', ReactNativeSvg.Defs.propType),
  };
});

// eslint-disable-next-line no-undef
test('Heart', () => {
  const tree = ReactTestRenderer.create(
    <Heart {...{
      width      : 50,
      gradient   : ['#EC6D57', '#FCC747'],
      rangeValue : 'sport',
    }} />
  ).toJSON();
  // eslint-disable-next-line no-undef
  expect(tree).toMatchSnapshot();
});

import React from 'react';
export default function svgElementMockGenerator (name, propTypes) {
  class SvgMock extends React.Component {
    static displayName = name;
    static propTypes = propTypes;
    render () {
      return React.createElement(name, this.props, this.props.children);
    }
  }
  return SvgMock;
}

This is passing, but I’m getting this warning:

 PASS  src/components/common/UI/__tests__/Components.test.js
  ✓ Heart (24ms)
  ✓ Headline (24ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   2 passed, 2 total
Time:        1.601s
Ran all test suites.
  console.error node_modules/react-native/Libraries/JavaScriptAppEngine/Initialization/ExceptionsManager.js:78
    Warning: Native component for "RNSVGSvgView" does not exist

Any ideas on how to get rid of that one?

Thanks!

[jakecraige]

Carrying on from the code posted here (thanks for doing the bulk of the work!). I’ve made it a little more generic where it’ll automatically mock out anything react-native-svg exports so it exports everything, and would support changes in the future.

I put this file into my project root /__mocks__/react-native-svg.js

import React, { Component } from 'react';
const ReactNativeSvg = jest.genMockFromModule('react-native-svg');

const excludedExports = ['Svg', 'default', '__esModule'];
const componentsToMock = Object.keys(ReactNativeSvg).filter(key => {
  return !excludedExports.includes(key);
});

const mocks = generateSvgMocks(componentsToMock);
// A hack to dynamically export all mocks as named exports.
// I don't think this is doable with the modern export syntax since it's dynamic.
module.exports = mocks;
export default mocks;

function generateSvgMocks(names) {
  return names.reduce((acc, name) => {
    acc[name] = generateSvgMock(name);
    return acc;
  }, generateSvgMock('Svg'));
};

function generateSvgMock(name) {
  return class SvgMock extends Component {
    static displayName = name;
    static propTypes = ReactNativeSvg[name].propType;

    render() {
      return React.createElement(name, this.props, this.props.children);
    }
  };
};

I added back the props and children since I wanted my snapshots to include the full Svg output where without it, you’d just get <Svg /> in the snapshot. If you want that, just change the mock to pass null for the children instead.

[Sundin]

Thank you @jakecraige and @isnifer, you guys are heroes! Your solution solved the following error that I got when running Jest:

TypeError: inst.toJSON is not a function