web-dev-qa-db-ja.com

テストスイートはTypeErrorの実行に失敗しました：未定義のプロパティ 'default'を読み取ることができません

React-NativeプロジェクトでJestをセットアップしようとしていますが、 bugsnag-react-native でNiceを再生していません。

現在のテスト構成では、以下に示すバグスナグの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;
_

したがって、すべてのファイルで、特に_NetworkReducer.js_でbugSnag.leaveBreadcrumb('someData')が問題を引き起こしている各ファイルで新しいクライアントを宣言するのではなく、このヘルパーファイルからbugSnagをインポートしています。

_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()
    };
});
_
javascriptreactjsunit-testingreact-nativejestjs
13
MattyK14

私の解決策は、代わりに次のモックを追加することでした：

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

これらすべてに対する明確な説明が役立つでしょう。

5
MattyK14

これはすでに回答されていますが、私の場合は別の問題がありました。どうやらreact-test-rendererコンストラクタが欠落している場合、コンポーネントのインスタンス化に失敗します。

したがって、次の行をPureComponentに追加する必要がありました。

constructor(props) {
    super(props)
}
18
Samer Murad

既に受け入れられた答えがありますが、今日は別の方法でそれを解決しました。

Githubでのこの回答 に従って、

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

postinstallスクリプト内。 Githubの関連する問題が解決されることを願っていますが、今のところ、私たちのチームはそのように取り組んでいます:-)

5
pietro909

クラス変数をコンストラクタに移動するだけでこれを解決しました。コンストラクターがあったとしても、このエラーが発生するので、コンストラクターに移動するとエラーがなくなりました。また、次のこともわかりました： https://github.com/facebook/react-native/issues/22437#issuecomment-445898652

0
Aaron