使用下一个 js，Mount 在酶中不起作用

Question

我正在使用 next js（使用 typescript 和 styled-component）编写一个网络应用程序。我开始写测试，在使用mount时，报错crashes

TypeError: Cannot read property 'child' of undefined

但是如果我使用 shallow 一切正常。我需要使用 mount 来渲染组件中的所有元素，因为如果我使用浅层，styled-component 的组件不会渲染，我也无法在其上模拟事件。我不明白问题是什么

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"
  }
}

Answer 1

出现此问题是因为版本 enzyme-adapter-react-16 与您的 react 版本 17 不兼容。

您可以降级到 React 16 或回退到此处描述的临时解决方案以升级酶适配器：https://github.com/wojtekmaj/enzyme-adapter-react-17

Answer 2

安装并导入这个包

第一步：npm 安装@wojtekmaj/enzyme-adapter-react-17

第 2 步：将 从 'enzyme-adapter-react-16' 导入适配器替换为 从“@wojtekmaj/enzyme-adapter-react-17”[导入适配器]

一切顺利。

使用下一个 js，Mount 在酶中不起作用

Mount does not work in enzyme with next js

reactjs

jestjs

tsx

enzyme

next.js