开玩笑：如何修复 - 类型错误：无法将函数"函数 () 的只读属性"名称"分配给只读属性

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', () => {});
});

我的包.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();
  });

开玩笑版本：26.6.3

反应脚本版本：4.0.1

注意

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

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();
       });
    }