开玩笑：TypeError：无法读取未定义的属性“子”

Question

当我尝试安装它时，我在开玩笑的单元测试中遇到了问题。 我得到的错误是： TypeError: Cannot read property 'child' of undefined

 wrapper = mount(
      <ExportTemplateModal {...props} open={true} onClose={onClose} />
    );

这是 ExportTemplateModal

interface IExportTemplateModalProps {
  open: boolean;
  onClose(...args: any[]): any;
}

export class ExportTemplateModal extends React.Component<Props, State> {
  render() {
    return (
      <Select
        onChange={(value) => {
          const selectedSupplier = projectSuppliers.find(
            (ps) => ps.supplierId === value
          );
          const projectSupplierIds = supplierMap[value] || [];
          this.setState({...});
        }}
      >
        {options}
      </Select>
    );
  }
}

这是 package.json，我尝试更改 React 版本和 React-dom 并运行npm install ，但没有成功。 我不确定我哪里做错了。 如果我 export export default Component as any它停止抱怨但我不知道这是否是修复，因为在我的单元测试中我得到另一个错误，它抱怨 React 包装器，这是错误 => Error: ReactWrapper::state() can only be called on class components

"dependencies": {
   "@amzn/pb-central-gql-schema": "*",
   "@amzn/pb-central-ui-components": "^1.0.0",
   "@hookform/resolvers": "^1.3.7",
   "@react-icons/all-files": "^4.1.0",
   "@testing-library/dom": "^8.13.0",
   "@testing-library/react-hooks": "^8.0.1",
   "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
   "emotion": "^10.0.27",
   "is-hotkey": "^0.1.8",
   "is-url": "^1.2.4",
   "jest-environment-jsdom-sixteen": "^2.0.0",
   "lodash.clonedeep": "^4.5.0",
   "lodash.differenceby": "^4.8.0",
   "lodash.escaperegexp": "^4.1.2",
   "lodash.get": "^4.4.2",
   "lodash.isempty": "^4.4.0",
   "lodash.isequal": "^4.5.0",
   "lodash.set": "^4.3.2",
   "lodash.sortby": "^4.7.0",
   "lodash.uniqueid": "^4.0.1",
   "office-ui-fabric-react": "^7.107.0",
   "react-hook-form": "^6.15.7",
   "react-i18next": "^11.18.3",
   "react-redux": "^8.0.2",
   "react-router-dom": "^5.2.0",
   "slate": "^0.60.8",
   "slate-history": "^0.59.0",
   "slate-react": "^0.60.8"
 },
 "peerDependencies": {
   "@amzn/meridian": "*",
   "@amzn/meridian-tokens": "*",
   "react": "^16.13.0",
   "react-dom": "^16.13.0",
   "date-fns": "^2.16.1"
 },
 "devDependencies": {
   "@amzn/brazil": "*",
   "@amzn/meridian": "*",
   "@amzn/meridian-tokens": "*",
   "@babel/core": "^7.6.0",
   "@babel/helper-validator-identifier": "7.10.4",
   "@babel/plugin-proposal-class-properties": "^7.12.1",
   "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
   "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
   "@babel/plugin-proposal-optional-chaining": "^7.12.1",
   "@babel/plugin-syntax-dynamic-import": "^7.8.3",
   "@babel/plugin-transform-react-jsx": "^7.12.1",
   "@babel/plugin-transform-runtime": "^7.12.1",
   "@babel/plugin-transform-typescript": "^7.12.1",
   "@babel/preset-env": "^7.12.1",
   "@babel/preset-react": "^7.12.1",
   "@babel/preset-typescript": "^7.12.1",
   "@babel/runtime": "7.4.5",
   "@sheerun/mutationobserver-shim": "^0.3.3",
   "@storybook/addon-actions": "^6.0.26",
   "@storybook/addon-essentials": "^6.0.26",
   "@storybook/addon-info": "5.3.21",
   "@storybook/addon-knobs": "^6.0.26",
   "@storybook/addon-links": "^6.0.26",
   "@storybook/addons": "^6.0.26",
   "@storybook/react": "^6.0.26",
   "@testing-library/jest-dom": "^5.16.1",
   "@testing-library/react": "^12.1.2",
   "@types/date-fns": "^2.6.0",
   "@types/enzyme": "^3.10.7",
   "@types/history": "^4.7.8",
   "@types/is-url": "^1.2.4",
   "@types/jest": "^26.0.24",
   "@types/lodash.clonedeep": "^4.5.6",
   "@types/lodash.differenceby": "^4.8.6",
   "@types/lodash.get": "^4.4.6",
   "@types/lodash.isempty": "^4.4.6",
   "@types/lodash.isequal": "^4.5.5",
   "@types/lodash.set": "^4.3.6",
   "@types/lodash.sortby": "^4.7.6",
   "@types/react": "^16.9.23",
   "@types/react-dom": "^16.9.5",
   "@types/react-router-dom": "^5.2.0",
   "@types/storybook-react-router": "^1.0.1",
   "@typescript-eslint/eslint-plugin": "^4.4.0",
   "@typescript-eslint/parser": "^4.4.0",
   "babel-eslint": "^10.1.0",
   "babel-loader": "^8.1.0",
   "babel-plugin-module-resolver": "^3.1.1",
   "babel-plugin-transform-react-remove-prop-types": "^0.4.19",
   "date-fns": "^2.16.1",
   "enzyme": "^3.11.0",
   "enzyme-adapter-react-16": "^1.15.5",
   "eslint": "7.11.0",
   "eslint-config-prettier": "^7.0.0",
   "eslint-plugin-jest": "^24.1.0",
   "eslint-plugin-react": "^7.21.5",
   "file-loader": "^6.2.0",
   "fs-extra": "^5.0.0",
   "globby": "^8.0.1",
   "history": "^4.10.1",
   "husky": "^4.3.8",
   "identity-obj-proxy": "^3.0.0",
   "jest": "^24.9.0",
   "jest-environment-enzyme": "^7.1.2",
   "jest-enzyme": "^7.1.2",
   "jest-transform-stub": "^2.0.0",
   "jest-when": "^3.2.1",
   "lint-staged": "^10.5.3",
   "prettier": "^2.2.1",
   "prettier-plugin-organize-imports": "^1.1.1",
   "react-to-typescript-definitions": "^1.2.0",
   "storybook-react-router": "^1.0.8",
   "typescript": "^4.2.4",
   "webpack-cli": "^4.2.0"
 },
 "npm-pretty-much": {
   "publishDir": "",
   "runRelease": "always"
 },
 "husky": {
   "hooks": {
     "pre-commit": "lint-staged"
   }
 },
 "lint-staged": {
   "src/**/*.{js,jsx,ts,tsx}": "eslint --cache --fix",
   "src/**/*.{js,ts,jsx,tsx,css,md}": "prettier --write"
 }

我努力了：

• 运行npm i react@18 react-dom@18 @types/react@18 @types/react-dom@18
• 删除 node_module 和 npm 重新安装
• 玩弄进口

任何帮助，将不胜感激。

Answer 1

您可以检查几项内容来解决此问题：

确保组件被正确导入并且组件路径正确。 检查组件是否在父组件中的正确位置呈现。 确保组件没有根据 state 或父组件的 props 有条件地呈现。 检查 react 和 enzyme-adapter-react-16 的版本，它应该与您使用的 react 版本兼容。 检查组件的所有依赖项是否已正确安装和导入。 通过在组件内部添加 console.log 来检查组件是否正常工作也很重要。