TyperError: this._instance.render is not a function

[Praveencena88]

After updating all the react-native and jest dependencies for app, test is not running its throwing error like this,

Error :

    TypeError: this._instance.render is not a function

      17 |
      18 | it('renders correctly', () => {
    > 19 |   const wrapper = shallow(
         |                   ^
      20 |     <MainApp store={store}/>)
      21 |     //expect(wrapper).toMatchSnapshot();
      22 | });

      at ReactShallowRenderer._mountClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:898:41)
      at ReactShallowRenderer.createElement [as render] (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:815:18)
      at node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:780:18
      at withSetStateAllowed (node_modules/enzyme-adapter-utils/build/Utils.js:200:16)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:968:68)
      at new ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:488:5)
      at shallow (node_modules/enzyme/build/shallow.js:26:10)
      at Object.<anonymous> (__tests__/App.js:19:19)

Version :

enzyme : 3.10.0
enzyme-adapter-react-16 : 1.15.0
react-native : 0.61.4
jest : 24.7.1
babel-jest : 24.9.0

[ljharb]

Try updating to the latest enzyme and enzyme-adapter-react-16; also, what version of react and react-dom and react-test-renderer are you using? They all have to match.

Separately, there doesn't yet exist a react native adapter for enzyme (see #1436), so until there is, enzyme won't work properly with many kinds of react-native components.

[Praveencena88]

@ljharb I have updated enzyme & enzyme-adapter-react-16 and tried still getting same error,

Version :

react:16.9.0
react-dom : 16.9.0
react-test-renderer : 16.10.2

[ljharb]

react-test-rendered MUST be the exact same minor version as react and react-dom - 16.9, only.

[Praveencena88]

still getting the same issue downgraded react-test-renderer to 16.9.0. But previously for react-native it is working fine after updating all the dependencies jest, enzyme & react then test is not running

[ljharb]

That's a lot of things to update all at once. I'd suggest downgrading them all back, and then upgrading one thing at a time and seeing which causes the failure.

[Praveencena88]

can u suggest which library will throw this kind of error, because its too hard to fallback for all dependencies which is working fine in development side

[ljharb]

I'm not sure i understand why; to upgrade or downgrade is a single npm install command.

The error is coming from react-test-renderer, but all of the react packages, and enyzme, are so tightly coupled that there's not really a way to tell.

[Praveencena88]

After downgraded all the testing dependencies to previous working version, i'm getting this issue,

Error :

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import 'react-native';
                                                                                          ^^^^^^

SyntaxError: Cannot use import statement outside a module

   at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)

[ljharb]

That looks like a jest issue; perhaps your lockfile wasn't reverted properly? Try to get things working like they were previously, and then upgrade one thing at a time until something breaks.

[Praveencena88]

still getting the same issue, can u please check this package.json where i got this instance.render is not a function issue

Package.json

{
  "dependencies": {
    "@react-native-community/async-storage": "^1.6.2",
    "@react-native-community/cameraroll": "^1.2.1",
    "@react-native-community/checkbox": "^0.2.0",
    "@react-native-community/datetimepicker": "^2.1.0",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/netinfo": "^4.4.0",
    "@redux-offline/redux-offline": "^2.5.2-native.1",
    "axios": "^0.18.1",
    "babel-core": "^6.26.3",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "draft-js": "^0.11.1",
    "immutable": "^4.0.0-rc.12",
    "js-search": "^1.4.3",
    "lodash": "^4.17.15",
    "lottie-ios": "^3.0.3",
    "lottie-react-native": "^3.0.3",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-native": "^0.61.4",
    "react-native-calendars": "^1.212.0",
    "react-native-camera": "^3.7.1",
    "react-native-draftjs-render": "^2.9.0",
    "react-native-firebase": "^5.5.6",
    "react-native-gesture-handler": "^1.4.1",
    "react-native-image-resizer": "^1.0.1",
    "react-native-interactable": "^1.0.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-maps": "^0.25.0",
    "react-native-reanimated": "^1.3.0",
    "react-native-sound": "^0.10.12",
    "react-native-svg": "^9.11.1",
    "react-native-vector-icons": "^6.6.0",
    "react-native-video": "^4.4.4",
    "react-native-webview": "^7.4.2",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.9.4",
    "react-navigation-tabs": "^2.5.6",
    "react-redux": "^7.1.1",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-persist-filesystem-storage": "^2.0.0",
    "redux-persist-transform-immutable": "^5.0.0",
    "redux-thunk": "^2.3.0",
    "rn-fetch-blob": "^0.11.2",
    "sound": "^2.6.1",
    "url": "^0.11.0",
    "victory-native": "^32.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/preset-env": "^7.8.3",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "@welldone-software/why-did-you-render": "^3.3.7",
    "appcenter": "^2.3.0",
    "appcenter-analytics": "^2.3.0",
    "appcenter-crashes": "^2.3.0",
    "babel-jest": "^24.9.0",
    "babel-plugin-rewire": "^1.2.0",
    "babel-preset-react-native": "^5.0.2",
    "chai": "^4.2.0",
    "chai-immutable": "^1.6.0",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.15.0",
    "eslint": "^6.5.1",
    "jest": "^24.7.1",
    "jest-html-reporter": "^2.6.2",
    "jest-react-native": "^18.0.0",
    "jetifier": "^1.6.4",
    "jsdoc": "^3.6.3",
    "metro-react-native-babel-preset": "^0.58.0",
    "path": "^0.12.7",
    "react-addons-test-utils": "^15.6.2",
    "react-native-startup-time": "^1.2.1",
    "react-test-renderer": "^16.9.0",
    "reactotron-react-native": "^4.0.2",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-mock-store": "^1.5.3",
    "redux-test-utils": "^0.3.0",
    "redux-testkit": "^1.0.6",
    "redux-thunk": "^2.3.0",
    "rewire": "^4.0.1"
  },
  "jest": {
    "preset": "react-native",
    "coveragePathIgnorePatterns": [
      "allMocks.js"
    ],
    "setupFiles": [
      "<rootDir>/jest/allMocks.js"
    ],
    "testPathIgnorePatterns": [
      "/*/*.testdata.js$",
      "AppTexttest.js"
    ],
    "transformIgnorePatterns": [
      "/node_modules/(?!(react-native|redux-persist|react-navigation.*?\\.js$))",
      "<rootDir>/app/components/AppText/AppText.js"
    ],
    "transform": {
      "\\.(jpg|jpeg|PNG|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./fileTransformer.js"
    },
    "reporters": [
      "default",
      [
        "./node_modules/jest-html-reporter",
        {
          "pageTitle": "Unit Test Report",
          "includeFailureMsg": true
        }
      ]
    ]
  }
}

[Praveencena88]

i'm getting empty shallowWrapper{} after shallow rendering the component,

    it("Should render the component",()=>{
        const wrapper = shallow(
            <MyComponent store={store} navigation={navigation}/>);
            expect(wrapper).toMatchSnapshot(); 
    })