[BUG] TypeError: Object.defineProperty called on non-object

[alexborton]

Describe the bug

I've stepped through the (very simple) setup instructions, with a view to add a POC to our project, but i'm met with the following error when the test runs;

app/screens/Authentication/LoginScreen/__tests__/LoginScreen.perf-test.tsx
  ● Test suite failed to run

    TypeError: Object.defineProperty called on non-object
        at Function.defineProperty (<anonymous>)

    > 1 | import { measureRenders } from 'reassure'
        | ^
      2 |
      3 | import LoginScreen from '../LoginScreen'
      4 |

      at defineProperty (node_modules/mathjs/lib/cjs/type/complex/Complex.js:19:10)
      at create (node_modules/mathjs/lib/cjs/utils/factory.js:45:12)
      at Object.<anonymous> (node_modules/mathjs/lib/cjs/entry/pureFunctionsAny.generated.js:20:84)
      at Object.require (node_modules/mathjs/lib/cjs/entry/mainAny.js:51:34)
      at Object.require (node_modules/mathjs/lib/cjs/index.js:6:16)
      at Object.require (node_modules/@callstack/reassure-measure/src/measure-helpers.tsx:1:1)
      at Object.require (node_modules/@callstack/reassure-measure/src/measure-renders.tsx:4:1)
      at Object.require (node_modules/@callstack/reassure-measure/src/index.ts:2:1)
      at Object.require (node_modules/reassure/src/index.ts:1:1)
      at Object.require (app/screens/Authentication/LoginScreen/__tests__/LoginScreen.perf-test.tsx:1:1)
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)

The test simply looks like;

import { measureRenders } from 'reassure'

import LoginScreen from '../LoginScreen'

test('Simple test', async () => {
  await measureRenders(<LoginScreen />)
})

To Reproduce
Steps to reproduce the behavior:

1. followed the setup instructions but installing reassure
2. Jest already setup and functional with @testing-library/react-native

Expected behavior
Tests should run in cli

[mdjastrzebski]

@alexborton which version of Reassure are you using? The error seems like issue with Babel when processing mathjs dep Reassure is using. Could you post your package.json and babel.config.js?

We have working examples for both Expo and RN CLI here. You could use that to check your Babel config.

Alternatively, I would need a minimal repro repo so I could reproduce the error on my end.

[alexborton]

Sure - thanks for taking a look!

I can't see anything obviously wrong in the babel setup, but we do have some additional definitions in there;

module.exports = (api) => {
  api.cache(true)

  const plugins = [
    'babel-plugin-styled-components',
    'react-native-reanimated/plugin',
    '@babel/plugin-transform-flow-strip-types',
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    ['@babel/plugin-transform-private-methods', { loose: true }],
    [
      'module-resolver',
      {
        root: ['.'],
        extensions: [
          '.ios.ts',
          '.android.ts',
          '.ts',
          '.ios.tsx',
          '.android.tsx',
          '.tsx',
          '.jsx',
          '.js',
          '.json',
        ],
        alias: {
          // -> aliases....
        },
      },
    ],
  ]

  if (process.env.BABEL_ENV !== 'development') {
    plugins.push(['transform-remove-console'])
  }

  return {
    presets: ['module:@react-native/babel-preset'],
    plugins,
  }
}

{
  "name": ...,
  "version": "1.76.0",
  "description": ...,
  "main": "index.js",
  "scripts": {
    // ...
  },
  "_moduleAliases": {
    // ...
  },
  "author": ...,
  "license": "UNLICENSED",
  "repository": ...,
  "devDependencies": {
    "@babel/core": "7.21.8",
    "@babel/plugin-transform-private-methods": "^7.23.3",
    "@babel/preset-env": "^7.23.9",
    "@babel/runtime": "7.21.5",
    "@react-native/babel-preset": "^0.73.19",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.3",
    "@react-native/typescript-config": "0.73.1",
    "@testing-library/jest-native": "^5.4.3",
    "@testing-library/react-hooks": "^4.0.1",
    "@testing-library/react-native": "^12.4.3",
    "@types/jest": "29.5.3",
    "@types/react": "18.0.26",
    "@types/react-test-renderer": "18.0.0",
    "babel-jest": "^29.6.3",
    "babel-plugin-module-resolver": "^5.0.0",
    "babel-plugin-styled-components": "^2.1.4",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "eslint": "8.56.0",
    "eslint-plugin-ft-flow": "^2.0.1",
    "eslint-plugin-prefer-smart-quotes": "^2.0.0",
    "eslint-plugin-react-native-a11y": "^3.3.0",
    "eslint-plugin-testing-library": "^6.2.0",
    "eslint-plugin-typescript-sort-keys": "2.3.0",
    "eslint-plugin-unicorn": "^51.0.1",
    "eslint-plugin-unused-imports": "3.0.0",
    "jest": "^29.6.3",
    "jest-environment-jsdom": "^29.7.0",
    "jest-fetch-mock": "^3.0.3",
    "jest-junit": "^12.0.0",
    "jest-silent-reporter": "^0.5.0",
    "metro-react-native-babel-preset": "0.76.7",
    "react-test-renderer": "18.2.0",
    "reassure": "^1.2.0",
    "typescript": "5.5.3",
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.73.6",
  },
  "engines": {
    "node": ">=18"
  },
  "jest-junit": {
    "outputDirectory": "reports/junit",
    "outputName": "jest-results.xml",
    "addFileAttribute": "true"
  },
  "packageManager": "[email protected]"
}

I've tried to remove anything that doesn't seem relevant to reduce noise 👍

[alexborton]

Just giving this a bump 👀 Is there any additional information that would be helpful to debug?

[mdjastrzebski]

Your deps look ok, I do not see nothing suspicious happening there. In order to move forward I would need to have a minimal reproduction repository showcasing the issue where I could diagnose the problem. This looks like some (babel) setup issue.

You can create one either starting from your code or using our example setups here.

[mdjastrzebski]

@alexborton have you been able to resolve your issue?