Jest tests fail on RN 0.58 (due to Jest Transpiling issue?)

This issue might affect a lot of packages, but currently I only experiencing it with this one. I believe it’s related to https://github.com/facebook/react-native/issues/22175 and the solution is probably to update the import/exports and class arrow methods.

When running jest tests:

TypeError: Cannot read property 'default' of undefined

at new Svg (node_modules/react-native-svg/elements/Svg.js:22:369)
at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3426:18)
at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6550:5)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7426:16)
at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10996:12)
at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11028:24)
at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11111:7)
at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11985:7)
at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11897:7)
at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11871:3)

[seanhenry]

I get this issue too after updating to 0.58.

In the meantime, I’m working around the issue adding the following to __mocks__/react-native-svg.js:

import React from 'react'
import { View } from 'react-native'

export default () => <View />

export const Circle = () => <View />
export const Ellipse = () => <View />
export const G = () => <View />
export const Text = () => <View />
export const TSpan = () => <View />
export const TextPath = () => <View />
export const Path = () => <View />
export const Polygon = () => <View />
export const Polyline = () => <View />
export const Line = () => <View />
export const Rect = () => <View />
export const Use = () => <View />
export const Image = () => <View />
export const Symbol = () => <View />
export const Defs = () => <View />
export const LinearGradient = () => <View />
export const RadialGradient = () => <View />
export const Stop = () => <View />
export const ClipPath = () => <View />
export const Pattern = () => <View />
export const Mask = () => <View />

[msand]

Btw, have you looked at these? https://github.com/react-native-community/react-native-svg/issues/198

https://gist.github.com/JCMais/8302a1646ccc9759237947a66bdda8e0

https://github.com/FormidableLabs/react-native-svg-mock