javascript - React Native : TypeError: babelHelpers. typeof 不是函数

Question

我已经检查了 stackoverflow 上的其他问题，但没有一个解决方案有效，这就是我重复这个问题的原因。

如标题所示，我在运行测试用例时遇到错误。我还没有在设备上运行它。

我也尝试了 https://github.com/facebook/react-native/issues/5747 上建议的各种方法.但我没有在这方面取得成功。

我的实用程序 js 文件如下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
}

下面是使用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)
  })
})

在我的 package.json 中，我有以下内容 -

{
  "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
  }
}

我的 .babelrc 目前看起来是这样的 -

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

当我运行测试时，这就是我得到的 -

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)

Answer 1

我对我的 sanity.js、.babelrc 文件进行了调整，它开始工作了。经验教训是在添加任何包或更改 babel 后使用以下命令:

我在我的 package.json

脚本中添加了以下内容

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

每次更改配置后，我都会运行 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
}

我的 .babelrc 现在看起来像这样

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