React-Native tests fail unless you use the deprecated way of importing styled components

[RossKinsella]

Styled react-native components throw TypeError: _styledComponents2.default.View is not a function when they are created using import styled from 'styled-components' https://cl.ly/0l1V1c0o1f2p

Reproduce:

import React from 'react'
import renderer from 'react-test-renderer'
import styled from 'styled-components'
import 'jest-styled-components/native'

const Test = styled.View``
test('it works', () => {
  const tree = renderer.create(<Test />).toJSON()
})

This is not the case when you import styled using import styled from 'styled-components/native', which is deprecated as of V3

Reproduce:

import React from 'react'
import renderer from 'react-test-renderer'
import styled from 'styled-components/native'
import 'jest-styled-components/native'

const Test = styled.View``
test('it works', () => {
  const tree = renderer.create(<Test />).toJSON()
})

[RossKinsella]

Here is my package.json:

{
  "name": "JobChat",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "start:reset": "node node_modules/react-native/local-cli/cli.js start --reset-cache",
    "start:e2e": "RN_FLAVOR=E2E node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:e2e:ios": "sh e2e/loadMocks-build-test-ios.sh",
    "test:e2e:android": "sh e2e/loadMocks-build-test-android.sh",
    "postinstall": "repackager setup",
    "storybook": "storybook start -p 7007"
  },
  "dependencies": {
    "babel-plugin-jsx-control-statements": "^3.2.8",
    "colors": "^1.2.1",
    "eslint-plugin-jsx-control-statements": "^2.2.0",
    "prop-types": "^15.6.1",
    "react": "16.0.0",
    "react-native": "0.51.0",
    "react-native-fcm": "14.1.3",
    "react-native-repackager": "^0.51.0",
    "styled-components": "^3.2.3"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.2",
    "babel-jest": "21.2.0",
    "babel-plugin-root-import": "^5.1.0",
    "babel-preset-react-native": "4.0.0",
    "detox": "^7.2.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
    "eslint-plugin-detox": "^1.0.0",
    "eslint-plugin-import": "^2.9.0",
    "eslint-plugin-jest": "^21.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-mocha": "^4.12.1",
    "eslint-plugin-react": "^7.7.0",
    "eslint-plugin-react-native": "^3.2.1",
    "jest": "^22.4.3",
    "jest-styled-components": "^5.0.0",
    "mocha": "^5.0.5",
    "react-native-mock-render": "0.0.22",
    "@storybook/react-native": "^3.3.15",
    "@storybook/addon-actions": "^3.3.15",
    "@storybook/addon-links": "^3.3.15",
    "@storybook/addons": "^3.3.15",
    "babel-core": "^6.26.0",
    "react-dom": "16.0.0"
  },
  "jest": {
    "preset": "react-native",
    "testEnvironment": "node",
    "setupFiles": [
      "<rootDir>/jest/setup.js"
    ],
    "testPathIgnorePatterns": [
      "node_modules",
      "__tests__/e2e"
    ]
  },
  "eslintConfig": {
    "extends": "./.eslintrc.json"
  },
  "detox": {
    "specs": "app/**/__tests__/e2e/*.js",
    "configurations": {
      "ios.sim.debug": {
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/JobChat.app",
        "build": "xcodebuild -project ios/JobChat.xcodeproj -scheme JobChat -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "name": "iPhone 7"
      },
      "android.emu.debug": {
        "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk",
        "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
        "type": "android.emulator",
        "name": "Nexus_5X_API_27"
      }
    }
  }
}

[lewisflude]

I'm also having this issue, thank you so much for suggesting the styled-components/native fix as it saved me from a massive headache. If I find out anything else about the problem I'll report back.

[RishitKedia]

@Kureev Hey! 👋 Sorry to bother you, but any chance that this will be fixed soon? This has become a stopper for testing native components unless I change all imports to the deprecated way (which I don't want to do). 😛 I looked around but wasn't able to find anything to help fix this. Anything we can do to help you fix this? 🙂

[alexbassy]

@RishitKedia while it's not a permanent solution, this workaround got it working for me

[RishitKedia]

@alexbassy Hey, thanks for the workaround, Alex! 🙏

[mbsyaswanth]

wrap the view and text in braces instead in styled components! here is example

import styled from "styled-components";

import {View} from "react-native";

export const Container = styled(View)`
  ......styles here.......
`;

then, back in the test cases, it just works... you don't need jest-styled-components

[sibelius]

what is the right solution?

[sebas-bytelion]

any updates?