Mount does not work in enzyme with next js

Question

I am writing a web app on next js(with typescript and styled-component). I started writing tests and when using mount, an error crashes

TypeError: Cannot read property 'child' of undefined

But if i use shallow everything works. I need to use mount for render all elements in component because if i use shallow, styled-component's components don't render and i can't simulate events on it. I can't understand what the problem is

SmartText.test.tsx:

import React from 'react'
import { mount, ReactWrapper } from 'enzyme'
import {SmartText} from '../components/UI/SmartText'

describe('Render UI', () => { 
let component: ReactWrapper
beforeEach(() => {
    component = mount(<SmartText/>)
})
describe('SmartText', () => {
    test('Snapshot', () => {
        expect(component).toMatchSnapshot()
    })
    test('Input text', () => {
        component.find('input').simulate('change', {
            target:{
                value: 'some'
            }
        })
        expect(component.find('input').prop('value')).toEqual('some')
    })
})
})

Package.json

      {
      "name": "task-manager",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "dev": "next dev",
        "build": "next b

uild",
    "start": "next start",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "test": "jest ",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "prettier": "prettier --check ./"
  },
  "dependencies": {
    "enzyme-adapter-react-16.3": "^1.7.3",
    "next": "9.5.5",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-flow": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "@storybook/addon-actions": "^6.0.27",
    "@storybook/addon-essentials": "^6.0.27",
    "@storybook/addon-links": "^6.0.27",
    "@storybook/react": "^6.0.27",
    "@types/enzyme": "^3.10.7",
    "@types/enzyme-adapter-react-16": "^1.0.6",
    "@types/jest": "^26.0.15",
    "@types/node": "^14.14.2",
    "@types/react": "^16.9.53",
    "@types/styled-components": "^5.1.4",
    "babel-jest": "^26.6.1",
    "babel-loader": "^8.1.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
    "enzyme-to-json": "^3.6.1",
    "jest": "^26.6.1",
    "jest-styled-components": "^7.0.3",
    "prettier": "^2.1.2",
    "react-is": "^17.0.1",
    "react-test-renderer": "^17.0.1",
    "sb": "^6.0.27",
    "styled-components": "^5.2.0",
    "ts-jest": "^26.4.1",
    "typescript": "^4.0.3"
  },
  "resolutions": {
    "styled-components": "^5"
  }
}

Heinrick

Answer 1

This problem happens because of the version enzyme-adapter-react-16 compared to your react version at 17 that is not compatible.

You can either downgrade to react 16 or fall back to a temporary solution described here to upgrade the enyzme adapter: https://github.com/wojtekmaj/enzyme-adapter-react-17

Tannenberg

Just ran into this problem when updating my boilerplate. Here's the enzyme issue tracker – Septic

Answer 2

Install this package and import it

step 1: npm install @wojtekmaj/enzyme-adapter-react-17

step 2: replace import Adapter from 'enzyme-adapter-react-16' with import Adapter from '@wojtekmaj/enzyme-adapter-react-17'

you are good to go.

Monition