React Nativeの非コンポーネントユニットテスト

Question

React Native/TypeScriptアプリケーションのユニットテストをいくつか書いてみたいと思います。問題は、ライブラリの一部が、 'AsyncStorage'や 'react-native-sqlite-2'のような開発環境では動作しないことです。

Jest Webサイトで私が見つけた唯一のことは、嘲笑に関することですが、これはUIテストを分離する単なる方法です。

node.jsライブラリを使用してこれらのライブラリをシミュレートし、環境に応じて適切なものをロードすることを考えていました。以下のような

何か：

if(isDevelopment) { 
    SQLiteDatabase = require("./sqlite_database_node").SQLiteDatabaseNode; 
} 
else { 
    SQLiteDatabase = require("./sqlite_database_rn").SQLiteDatabaseRN; 
} 

が、これはこの問題について移動する正しい方法ですか？はいの場合は、どのようにインポート/インポートすれば動作するのですか？いいえ、それを行う最良の方法は何ですか？

Answer 1

Jestまたは任意の単体テストを実行するとき。テストはノード環境で実行されています。 したがって、ネイティブコンポーネント/ライブラリ（たとえば、Async StorageまたはSQLite）を持つモジュールにアクセスしようとすると、コードはtest envで破損します。

この問題を解決するため、Jestはモジュールモックを思いついた。 私のプロジェクトでは、内部的にネイティブモジュールを使用するnode_moduleに対して、それをグローバルモックを作成します。あなたは、単にそう

. 
├── README.md 
├── __mocks__ 
│   ├── base-64.js 
│   ├── react-native-animatable.js 
│   ├── react-native-config.js 
│   ├── react-native-device-info.js 
│   ├── react-native-fetch-blob.js 
│   ├── react-native-firebase.js 
│   ├── react-native-google-analytics-bridge.js 
│   ├── react-native-map-markerclustering.js 
│   ├── react-native-maps.js 
│   ├── react-native-simple-download-manager.js 
│   ├── react-native-simple-toast.js 
│   ├── react-native-splash-screen.js 
│   ├── react-native-testfairy.js 
│   ├── react-native-version-number.js 
│   └── react-native.js 
├── __tests__ 
│   └── index.test.js 
├── app 
│   ├── App.container.js 
│   ├── __tests__ 
│   ├── assets 
│   ├── components 
│   ├── config 
│   ├── index.js 
│   ├── language 
│   ├── pages 
│   ├── redux 
│   ├── routes 
│   ├── themes 
│   └── utils 
├── app.json 
├── circle.yml 
├── index.js 
├── package.json 
└── yarn.lock 

のようにルートディレクトリにフォルダ__mocks__を作成し、例として

__mocks__/react-native-firebase.js

module.exports = { 
    crash:() => ({ 
    setCrashCollectionEnabled: jest.fn() 
    }), 
    auth:() => ({ 
    signInAnonymously: jest.fn() 
    }), 
    database:() => ({ 
    ref:() => ({ 
     on: jest.fn() 
    }) 
    }), 
    config:() => ({ 
    fetch: jest.fn(), 
    setDefaults: jest.fn(), 
    getValue: jest.fn() 
    }), 
    messaging: jest.fn(() => ({ 
    requestPermissions: jest.fn(), 
    subscribeToTopic: jest.fn(), 
    getToken: jest.fn(Promise.resolve), 
    onMessage: jest.fn(), 
    getInitialNotification: jest.fn(Promise.resolve), 
    onTokenRefresh: jest.fn() 
    })) 
}; 

か多分__mocks__/react-native-device-info

を見てみましょうことを行うには

const mockmod = jest.genMockFromModule('react-native-device-info'); module.exports = mockmod;

ポイントが自動的にuは嘲笑モジュールを実行していますし、アプリのENVにあなたが持つことになりますテストのenvで結果uがrequire('react-native-device-info')

行うときに、これらのファイルを使用したテストのenv冗談中に..です実際のノードモジュール。