开玩笑：如何修复 - TypeError：无法分配给函数“function () 的只读属性“名称”

Question

我在我自己的功能组件中使用react-native-paper。我想为我的组件编写 Jest 测试。

问题：当我将组件导入 Jest 测试文件时，我收到此错误：

TypeError: Cannot assign to read only property 'name' of function 'function () {for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {ar...<omitted>... }'
at node_modules/react-native-paper/src/core/withTheme.js:136:46
   at Array.forEach (<anonymous>)
at withTheme (node_modules/react-native-paper/src/core/withTheme.js:124:5)
at Object.<anonymous> (node_modules/react-native-paper/src/components/Typography/Text.js:46:24)
at Object.<anonymous> (node_modules/react-native-paper/src/components/BottomNavigation.js:16:48)`

试图缩小错误范围，我发现即使是这个简单的 Jest 文件也会导致错误。

复制器

import React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';

describe('Unit Tests - Component:', () => {
  it('s a test', () => {});
});

我的package.json：

{
  "name": "TodoList",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "prettier": "prettier --write '*.js'",
    "format-code": "yarn run prettier && yarn run lint:fix",
    "precommit": "lint-staged",
    "test:coverage": "jest --coverage && open coverage/lcov-report/index.html"
  },
  "lint-staged": {
    "*.js": ["yarn run format-code", "git add"]
  },
  "dependencies": {
    "firebase": "^5.5.3",
    "prop-types": "^15.6.0",
    "react": "16.4.1",
    "react-native": "0.56.0",
    "react-native-image-picker": "^0.26.7",
    "react-native-keychain": "^3.0.0",
    "react-native-paper": "^1.0.1",
    "react-native-vector-icons": "^5.0.0",
    "react-navigation": "^1.5.12",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "yarn": "^1.9.4"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.2",
    "babel-jest": "22.4.1",
    "babel-preset-react-native": "^5.0.2",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.6.0",
    "eslint": "^4.18.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    "husky": "^0.14.3",
    "jest": "22.4.2",
    "jest-fetch-mock": "^2.1.0",
    "lint-staged": "^7.2.2",
    "prettier": "1.10.2",
    "react-dom": "^16.7.0",
    "react-test-renderer": "16.4.1",
    "redux-mock-store": "^1.5.3"
  },
  "jest": {
    "preset": "react-native",
    "setupFiles": ["<rootDir>/tests/setup.js"],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    },
    "collectCoverageFrom": ["app/**/*.js", "!app/components/index.js"]
  }
}

Answer 1

我遇到了同样的问题window.location.reload：

TypeError: Cannot assign to read only property 'reload' of object '[object Location]'

我做了以下操作以使其正常工作：

TypeError: Cannot assign to read only property 'reload' of object '[object Location]'

笑话版本：26.6.3

反应脚本版本：4.0.1

笔记

react-scripts升级到版本后出现此问题4.0.1。

Answer 2

解决方案：

    import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';

    describe('Unit Test', () => {
       const theme = {
          ...DefaultTheme,
          colors: {
             ...DefaultTheme.colors,
          },
       };
       const props = {};

       beforeEach(() => {
          renderedComponent = renderer
             .create(<PaperProvider theme={theme}>
                <MyCompoment {...props} />
                </PaperProvider>)
             .toJSON();

       // basic tests
       it(`${componentName} renders successfully`, () => {
          expect(renderedComponent).toBeTruthy();
       });
    }