Mount 不适用于带有下一个 js 的酶

Posted 2023-02-21

【中文标题】Mount 不适用于带有下一个 js 的酶

【英文标题】：Mount does not work in enzyme with next js

【发布时间】：2021-02-11 14:26:14

【问题描述】：

我正在下一个 js 上编写一个 Web 应用程序（使用 typescript 和 styled-component）。我开始写测试，在使用 mount 时出现错误崩溃

TypeError: Cannot read property 'child' of undefined

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

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')
    )
)
)

包.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"
  

【参考方案1】：

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

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

【讨论】：

刚刚在更新我的样板文件时遇到了这个问题。这是enzyme issue tracker

【参考方案2】：

安装此包并导入

第 1 步：npm install @wojtekmaj/enzyme-adapter-react-17

第 2 步：将 import Adapter from 'enzyme-adapter-react-16' 替换为 import Adapter from '@wojtekmaj/enzyme-adapter-react-17'

你可以走了。