CODEWITHSUNDEEP
javascriptreact-nativejestjsbabeljs
Jimit Patel
Jimit Patel

Reputation: 4297

React Native: TypeError: babelHelpers.typeof is not a function

I have checked other questions over stackoverflow but none of the solution is working that's why I am repeating this question.

As title suggest I am getting error while running test cases. I am yet to run it on device.

I have also tried various methods as suggested on https://github.com/facebook/react-native/issues/5747. But I am not getting success on it.

My utility js file as below sanity.js

/**
 * Constants for type of object passed
 */
export const TYPE_OF = {
  STRING: 'string',
  FUNCTION: 'function',
  UNDEFINED: 'undefined',
  BLANK: '',
  NULL: 'null',
  NEGATIVE_INDEX: -1
}

/**
 * Checks whether any parameters passed is null or not.
 * @param  {...any} params that needs to be checked
 * @returns {boolean} true if any one param is null
 */
export function isNull(...params) {
  for (let i = 0; i < params.length; i = i + 1) {
    if (TYPE_OF.UNDEFINED === typeof params[i] || TYPE_OF.NULL === typeof params[i]) {
      return true
    }
  }
  return false
}

/**
 * Checks whether all parameters passed is function or not
 * @param  {...any} params that needs to be checked
 * @returns {boolean} true if all params are function
 */
export function isFunction(...params) {
  for (let i = 0; i < params.length; i = i + 1) {
    if (TYPE_OF.FUNCTION !== typeof params[i]) {
      return false
    }
  }
  return false
}

/**
 * Checkes whether all parameters passed is string or not
 * @param  {...any} params that needs to be checked
 * @returns {boolean} true of all params are string
 */
export function isString(...params) {
  for (let i = 0; i < params.length; i = i + 1) {
    if (TYPE_OF.STRING !== typeof params[i]) {
      return false
    }
  }
  return false
}

Below are the test cases using jest sanity.test.js

import { isNull, isFunction, isString } from '../../src/utils/sanity.js'

describe('check for nulls', () => {
  it('none of the arguments are null', () => {
    let var1 = ''
    let var2 = 'abc'
    let var3 = ['1', '2']
    let booleanValue = isNull(var1, var2, var3)
    expect(booleanValue).toEqual(false)
  })

  it('one of the arguments is null', () => {
    let var1
    let var2 = 'abc'
    let var3 = ['1', '2']
    let booleanValue = isNull(var1, var2, var3)
    expect(booleanValue).toEqual(true)
  })
})
describe('check for functions', () => {
  it('all the arguments are function', () => {
    let var1 = jest.fn()
    let var2 = jest.fn()
    let booleanValue = isFunction(var1, var2)
    expect(booleanValue).toEqual(true)
  })

  it('not all the arguments are function', () => {
    let var1 = jest.fn()
    let var2 = jest.fn()
    let var3 = '3'
    let booleanValue = isFunction(var1, var2, var3)
    expect(booleanValue).toEqual(false)
  })
})
describe('check for strings', () => {
  it('all the arguments are string', () => {
    let var1 = ''
    let var2 = '2'
    let booleanValue = isString(var1, var2)
    expect(booleanValue).toEqual(true)
  })

  it('not all the arguments are string', () => {
    let var1 = 'abc'
    let var2
    let var3 = '3'
    let booleanValue = isString(var1, var2, var3)
    expect(booleanValue).toEqual(false)
  })
})

In my package.json I have following things -

{
  "dependencies": {
    "prop-types": "^15.6.2",
    "react": "16.4.1",
    "react-native": "^0.56.1",
    "react-navigation": "^2.13.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^9.0.0",
    "babel-jest": "^23.6.0",
    "babel-preset-react-native": "^5.0.2",
    "babel-preset-stage-1": "^6.24.1",
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0",
    "enzyme-to-json": "^3.3.4",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.11.1",
    "eslint-plugin-react-native": "^3.2.1",
    "jest": "23.5.0",
    "jest-cli": "^22.4.4",
    "jest-sonar-reporter": "^2.0.0",
    "jest-static-stubs": "0.0.1",
    "jsdoc": "^3.5.5",
    "react-dom": "^16.5.0",
    "react-test-renderer": "16.4.1",
    "regenerator-runtime": "^0.12.1"
  },
  "jest": {
    "preset": "react-native",
    "testResultsProcessor": "jest-sonar-reporter"
  },
  "jestSonar": {
    "sonar56x": true
  }
}

And my .babelrc looks like this currently -

{
  "presets": ["@babel/preset-env", "@babel/preset-react", "react-native"]
}

And when I run test, this is what I get -

FAIL  __test__/utils/sanity.test.js
  check for nulls
    ✕ none of the arguments are null (4ms)
    ✕ one of the arguments is null (1ms)
  check for functions
    ✕ all the arguments are function
    ✕ not all the arguments are function (1ms)
  check for strings
    ✕ all the arguments are string
    ✕ not all the arguments are string (1ms)

  ● check for nulls › none of the arguments are null

    TypeError: babelHelpers.typeof is not a function

      19 | export function isNull(...params) {
      20 |   for (let i = 0; i < params.length; i = i + 1) {
    > 21 |     if (TYPE_OF.UNDEFINED === typeof params[i] || TYPE_OF.NULL === typeof params[i]) {
      22 |       return true
      23 |     }
      24 |   }

      at isNull (src/utils/sanity.js:21:104)
      at Object.<anonymous> (__test__/utils/sanity.test.js:8:43)

  ● check for nulls › one of the arguments is null

    TypeError: babelHelpers.typeof is not a function

      19 | export function isNull(...params) {
      20 |   for (let i = 0; i < params.length; i = i + 1) {
    > 21 |     if (TYPE_OF.UNDEFINED === typeof params[i] || TYPE_OF.NULL === typeof params[i]) {
      22 |       return true
      23 |     }
      24 |   }

      at isNull (src/utils/sanity.js:21:104)
      at Object.<anonymous> (__test__/utils/sanity.test.js:16:43)

  ● check for functions › all the arguments are function

    TypeError: babelHelpers.typeof is not a function

      33 | export function isFunction(...params) {
      34 |   for (let i = 0; i < params.length; i = i + 1) {
    > 35 |     if (TYPE_OF.FUNCTION !== typeof params[i]) {
      36 |       return false
      37 |     }
      38 |   }

      at isFunction (src/utils/sanity.js:35:49)
      at Object.<anonymous> (__test__/utils/sanity.test.js:24:47)

  ● check for functions › not all the arguments are function

    TypeError: babelHelpers.typeof is not a function

      33 | export function isFunction(...params) {
      34 |   for (let i = 0; i < params.length; i = i + 1) {
    > 35 |     if (TYPE_OF.FUNCTION !== typeof params[i]) {
      36 |       return false
      37 |     }
      38 |   }

      at isFunction (src/utils/sanity.js:35:49)
      at Object.<anonymous> (__test__/utils/sanity.test.js:32:47)

  ● check for strings › all the arguments are string

    TypeError: babelHelpers.typeof is not a function

      47 | export function isString(...params) {
      48 |   for (let i = 0; i < params.length; i = i + 1) {
    > 49 |     if (TYPE_OF.STRING !== typeof params[i]) {
      50 |       return false
      51 |     }
      52 |   }

      at isString (src/utils/sanity.js:49:47)
      at Object.<anonymous> (__test__/utils/sanity.test.js:40:45)

  ● check for strings › not all the arguments are string

    TypeError: babelHelpers.typeof is not a function

      47 | export function isString(...params) {
      48 |   for (let i = 0; i < params.length; i = i + 1) {
    > 49 |     if (TYPE_OF.STRING !== typeof params[i]) {
      50 |       return false
      51 |     }
      52 |   }

      at isString (src/utils/sanity.js:49:47)
      at Object.<anonymous> (__test__/utils/sanity.test.js:48:45)

Upvotes: 3

Views: 974

Answers (1)

Jimit Patel
Jimit Patel

Reputation: 4297

I made tweaks in my sanity.js, .babelrc file and it started working. Lesson learned is after adding any package or change in babel use the following command:

I added following in my script of package.json

"reset": "watchman watch-del-all && react-native start --reset-cache"

and after every change in config I am running npm run reset

sanity.js

/**
 * Constants for type of object passed
 */
export const TYPE_OF = {
  BLANK: '',
  NEGATIVE_INDEX: -1
}

/**
 * Checks whether any parameters passed is null or not.
 * @param  {...any} params that needs to be checked
 * @returns {boolean} true if any one param is null
 */
export function isNull(...params) {
  for (let i = 0; i < params.length; i = i + 1) {
    if (params[i] === null || params[i] === undefined) { // eslint-disable-line
      return true
    }
  }
  return false
}

/**
 * Checks whether all parameters passed is function or not
 * @param  {...any} params that needs to be checked
 * @returns {boolean} true if all params are function
 */
export function isFunction(...params) {
  for (let i = 0; i < params.length; i = i + 1) {
    if (isNull(params[i]) || params[i] && {}.toString.call(params[i]) !== '[object Function]') {
      return false
    }
  }
  return true
}

/**
 * Checkes whether all parameters passed is string or not
 * @param  {...any} params that needs to be checked
 * @returns {boolean} true of all params are string
 */
export function isString(...params) {
  for (let i = 0; i < params.length; i = i + 1) {
    if (isNull(params[i]) || params[i] && {}.toString.call(params[i]) !== '[object String]') {
      return false
    }
  }
  return true
}

My .babelrc looks like this now

{
    "presets": ["react-native"]
}

Upvotes: 2

Related Questions