Jest: How to fix - TypeError: Cannot assign to read only property 'name' of function 'function ()

Question

Im using react-native-paper within my own functional component. I want to write Jest tests for my component.

Problem: When I import my component to the Jest test file I receive this error:

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)`

Trying to narrow the error I found out that even this simple Jest file will cause the error.

Reproducer

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

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

My 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

I faced the same issue for window.location.reload:

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

I did the following to make it work:

  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 version: 26.6.3

react-scripts version: 4.0.1

Note

The issue appeared after upgrading to react-scripts version 4.0.1.

Answer 2

Solution:

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