测试套件无法运行TypeError:无法读取属性'默认'未定义的

时间:2018-01-04 19:37:23

标签: javascript reactjs unit-testing react-native jestjs

我试图在我的反应原生项目上设置Jest,但它与bugsnag-react-native的搭配并不好。

根据我目前的测试配置,我发现了与下面看到的bugsnag leaveBreadcrumb功能相关的错误:

 FAIL  app/__tests__/NetworkReducer.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'default' of undefined

      at Object.<anonymous> (app/__tests__/NetworkReducer.test.js:10:20)
          at Generator.next (<anonymous>)
          at Promise (<anonymous>)

我有一个实例化bugsnag的帮助文件:

helpers/bugSnag.js


//-------------------------------------------------------------------------------------------------
// Create a single instance of the bugsnag client so we don't have to duplicate our configuration
// anywhere.
//-------------------------------------------------------------------------------------------------
// https://docs.bugsnag.com/platforms/react-native/#basic-configuration

import { Client, Configuration } from 'bugsnag-react-native';
const config = new Configuration();
config.consoleBreadcrumbsEnabled = true;
config.notifyReleaseStages = ['testflight', 'production'];

const bugSnag = new Client(config);


export default bugSnag;

因此,在我的所有文件中,我都是从这个帮助文件中导入bugSnag,而不是在每个文件中声明一个新客户端,特别是在NetworkReducer.js bugSnag.leaveBreadcrumb('someData')导致我出现问题的情况下。

NetworkReducer.test.js我打电话给模拟人员:

 jest.mock(bugSnag, () => {
    return {
        leaveBreadcrumb: jest.fn()
    };
 });

我还要导入bugSnag from path/to/helpers/bugSnag

如果我注释掉了模拟,我会在每个bugSnag.leaveBreadcrumb('someData')的减速器类型上收到不同的错误消息,如下所示:

TypeError: _bugSnag2.default.leaveBreadcrumb is not a function

  at Object.network_prop_update (app/reducers/NetworkReducer.js:29:19)
  at app/reducers/createReducer.js:4:29
  at Object.<anonymous> (app/__tests__/NetworkReducer.test.js:80:29)
  at tryCallTwo (node_modules/promise/lib/core.js:45:5)
  at doResolve (node_modules/promise/lib/core.js:200:13)
  at new Promise (node_modules/promise/lib/core.js:66:3)

我以为我已经处理了这个开玩笑的事情并且嘲笑,但我想我已被证明是错的。我已经附上了我的Jest setup.js以供额外参考:

    jest.mock('Linking', () => {
    return {
        addEventListener: jest.fn(),
        removeEventListener: jest.fn(),
        openURL: jest.fn(),
        canOpenURL: jest.fn(),
        getInitialURL: jest.fn(),
    };
});


jest.mock('PushNotificationIOS', () => {
    return {
        addEventListener: jest.fn(),
        requestPermissions: jest.fn(() => Promise.resolve()),
        getInitialNotification: jest.fn(() => Promise.resolve()),
    };
});


jest.mock('react-native-intercom', () => {
    return {
        registerIdentifiedUser: jest.genMockFn().mockReturnValue(Promise.resolve()),
        registerUnidentifiedUser: jest.genMockFn().mockReturnValue(Promise.resolve()),
        updateUser: jest.genMockFn().mockReturnValue(Promise.resolve()),
        reset: jest.genMockFn().mockReturnValue(Promise.resolve()),
        logEvent: jest.genMockFn().mockReturnValue(Promise.resolve()),
        handlePushMessage: jest.genMockFn().mockReturnValue(Promise.resolve()),
        displayMessenger: jest.genMockFn().mockReturnValue(Promise.resolve()),
        hideMessenger: jest.genMockFn().mockReturnValue(Promise.resolve()),
        displayMessageComposer: jest.genMockFn().mockReturnValue(Promise.resolve()),
        displayMessageComposerWithInitialMessage: jest.genMockFn().mockReturnValue(Promise.resolve()),
        displayConversationsList: jest.genMockFn().mockReturnValue(Promise.resolve()),
        getUnreadConversationCount: jest.genMockFn().mockReturnValue(Promise.resolve()),
        setLauncherVisibility: jest.genMockFn().mockReturnValue(Promise.resolve()),
        setInAppMessageVisibility: jest.genMockFn().mockReturnValue(Promise.resolve()),
        setupAPN: jest.genMockFn().mockReturnValue(Promise.resolve()),
        registerForPush: jest.genMockFn().mockReturnValue(Promise.resolve()),
        setUserHash: jest.genMockFn().mockReturnValue(Promise.resolve()),
        setBottomPadding: jest.genMockFn().mockReturnValue(Promise.resolve()),
        addEventListener: jest.fn(),
        removeEventListener: jest.fn()
    };
});


jest.mock('bugsnag-react-native', () => {
    return {
        leaveBreadcrumb: jest.fn(),
        Configuration: jest.fn(),
        Client: jest.fn()
    };
});

4 个答案:

答案 0 :(得分:15)

这已经得到回答,但是就我而言,我遇到了另一个问题。 显然,react-test-renderer如果缺少组件的构造函数,将无法实例化它们。

所以我需要将它们添加到我的PureComponent下:

constructor(props) {
    super(props)
}

答案 1 :(得分:4)

我的解决方案是添加以下模拟:

jest.mock('../app/helpers/bugSnag', () => {
    return {
        leaveBreadcrumb: jest.fn(),
    };
});

对所有这些的明确解释会有所帮助。

答案 2 :(得分:2)

尽管已经有一个可以接受的答案,但我今天用另一种方式解决了它。

this answer on Github之后,我说:

sed -i -- 's/inlineRequires: true,/inlineRequires: false,/' node_modules/react-native/jest/preprocessor.js

在我的postinstall脚本中。我希望有关Github的相关问题能够得到解决,但是就目前而言,因为我们的团队正在这样工作:-)

答案 3 :(得分:0)

我通过简单地将类vars移入构造函数来解决了这个问题。即使我有构造函数,我仍然会遇到此错误,因此将它们移到构造函数中可以消除该错误。还发现在这里:https://github.com/facebook/react-native/issues/22437#issuecomment-445898652