如何用玩笑来嘲笑第三方反应本机组件? [英] How to mock a third party react-native component with jest?

问题描述

我正在使用 NumericInput ，当我运行我的设备上的应用程序.

I am using the NumericInput and it works fine when I run the application on my device.

但是，当我运行jest时，会遇到各种错误:

However, when I run jest, I get all kind of errors:

TypeError: Cannot read property 'default' of undefined

  at new Icon (node_modules/react-native-vector-icons/lib/create-icon-set.js:42:389)
  at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3435:18)
  at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6606:5)
  at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7563:16)
  at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11234:12)
  at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11266:24)
  at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11349:7)
  at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12237:7)
  at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12149:7)
  at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12123:3)

和

console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9036
The above error occurred in the <Icon> component:
    in Icon (at NumericInput.js:226)
    in View (created by View)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at TouchableOpacity.js:282)
    in TouchableOpacity (at Button.js:18)
    in Button (at NumericInput.js:225)
    in View (created by View)
    in View (at NumericInput.js:224)
    in NumericInput
    in View (created by View)
    in View
    in View (created by View)
    in View (at ScrollViewMock.js:29)
    in RCTScrollView (created by _class)
    in _class (at ScrollViewMock.js:27)
    in ScrollViewMock (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://.../react-error-boundaries to learn more about error boundaries.

第一个问题:这正常吗?

第二个问题:如果是，我该如何模拟NumericInput?

Second question: If it is, how do I mock NumericInput?

遵循本指南，看来我需要这样做:

Following this guide, it seems I need to do:

jest.mock('react-native-numeric-input', () => 'NumericInput');

但是它不起作用.我也尝试过:

But it doesn't work. I also tried:

jest.mock('react-native-vector-icons', () => 'Icon');

没有成功.

o_0这是怎么回事?

What is going on here o_0?

干杯！

推荐答案

这是react-native官方开玩笑的预处理程序的问题.

This was a problem with react-native's official jest preprocessor.

这是我开玩笑的配置文件:

This was my jest config file:

const { defaults } = require('jest-config');

module.exports = {
    preset: 'react-native',
    transform: {
        '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
        '^.+\\.tsx?$': 'ts-jest'
    },
    moduleFileExtensions: [
        'tsx',
        ...defaults.moduleFileExtensions
    ],
};

要解决此问题，这是我的新玩笑配置文件:

To solve the problem, this is my new jest config file:

const { defaults } = require('jest-config');

module.exports = {
    preset: 'react-native',
    transform: {
        '^.+\\.tsx?$': 'ts-jest'
    },
    moduleFileExtensions: [
        'tsx',
        ...defaults.moduleFileExtensions
    ],
};

使用'react-native'预设时，您不需要开玩笑的预处理程序转换项. 了解更多信息.

You do not need the jest preprocessor transform item when using the 'react-native' preset. For more info.

这篇关于如何用玩笑来嘲笑第三方反应本机组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！