web-dev-qa-db-ja.com

Reactネイティブ-単体テストでFormDataをモックする

API呼び出しの多くがFormDataを使用しているため、サンクのテストで問題が発生しています。テストでこれをモックする方法がわからないようです。私はJestを使用しています。

私のセットアップファイルは次のようになります。

import 'isomorphic-fetch';

// Mocking the global.fetch included in React Native
global.fetch = jest.fn();

// Helper to mock a success response (only once)
fetch.mockResponseSuccess = body => {
  fetch.mockImplementationOnce(() =>
    Promise.resolve({ json: () => Promise.resolve(JSON.parse(body)) })
  );
};

// Helper to mock a failure response (only once)
fetch.mockResponseFailure = error => {
  fetch.mockImplementationOnce(() => Promise.reject(error));
};

ただし、FormDataを必要とするすべてのテストで次のエラーが発生します。

ReferenceError: FormData is not defined

react-native-mockの下のsrc/Libraries/Network/FormDataからFormDataファイルをインポートしようとしましたが、機能しませんでした。

だから私は誰かがこれをやって運が良かったのだろうかと思っていましたか?

一般に、React Nativeでfetchリクエストをモックする最良の方法を見つけるのに苦労しているので、ここでのアドバイスは素晴らしいでしょう。私は試してみました。 jest-fetch-mock lib(そしてFormDataに関する問題を開いた)、nock(運がない)、そしてこの単純なJest実装でセットアップを試みましたが、まだ何も正しく感じられません。

8
jhm

これは古い質問ですが、グーグルの最初のページで見つけたので、これが私がしたことです:

テストの開始時に、次のように追加しました。

function FormDataMock() {
    this.append = jest.fn();
}
global.FormData = FormDataMock

これにより、すべての場所で

const formData = new FormData()

私のモックを使用します。

もちろん、私は「追加」メソッドをモックしただけです。私の場合、それが必要な唯一のものだったからです。私がテストしていた関数は、作成されたFormDataオブジェクトを返しました。これを実行して、すべてが期待どおりに機能するかどうかをテストしました。

const resultFormData = theFunction()
expect(resultFormData.append.mock.calls.sort(sortFunc)).toEqual(expected)
16

テストファイルの先頭に次のコードを追加します

global.FormData = require('FormData')

または

package.jsonにこのようなものがあります

{
    "jest": {
        "preset": "react-native",
        "transformIgnorePatterns": [
          "<rootDir>/node_modules/(?!react-native|tcomb-form-native|ReactUtils|react-native-button)"
        ],
        "automock": false,
        "setupFiles": [
          "./setupJest.js"
        ]
      }
}

次に、setupJest.jsと同じフォルダーにpackage.jsonファイルを作成し、その中に次のコードを含めます

global.FormData = require('FormData')

そのため、jestがテストを実行するたびにjestsetupJest.jsを呼び出します

1
Susth