react-native - Jest : How to fix - TypeError: Cannot assign to read only property 'name' of function '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]'

我做了以下工作以使其工作:

  const reload = window.location.reload;

  beforeAll(() => {
    Object.defineProperty(window, 'location', {
      value: { reload: jest.fn() }
    });
  });

  afterAll(() => {
    window.location.reload = reload;
  });

  it('my test case', () => {
    // code to test the call to reload
    expect(window.location.reload).toHaveBeenCalled();
  });

Jest 版本:26.6.3
react 脚本版本:4.0.1
备注
升级到 react-scripts后出现问题版本 4.0.1 .