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

解决方案：

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

Answer 2

我遇到<Form name="dynamic_form_nest_item" initialValues={{ users: [ {first: 'Im', last: 'Okay'} ] }} onFinish={onFinish} autoComplete="off" >的相同问题：

window.location.reload

我做了以下工作：

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

最新版本：26.6.3

反应脚本版本：4.0.1

注意

升级到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(); });版本react-scripts后出现了问题。

开玩笑：如何修复-TypeError：无法分配为只读函数'function（）的属性'name'

2 个答案: