[解決済み] rn-fetch-blob: アップロードされた画像をテストする方法
2022-02-13 22:52:29
質問
どのようにjestjsを使用して画像をアップロードするためのRNFetchBlobをモックするのですか?
コード
await RNFetchBlob.fetch(
'POST',
'https://www.example.net/api/v1/upload-image',
{
Authorization: 'Bearer token',
'Content-Type': 'application/octet-stream',
},
'base64string',
)
.then(res => res.json())
.then(res => {
setUrl(res.url);
});
どのように解決するのですか?
を使用することができます。
jest.mock(モジュール名, ファクトリ, オプション)
嘲るように
rn-fetch-blob
モジュールを使用します。以下は、ユニットテストによる解決策です。
例)。
index.js
:
import RNFetchBlob from 'rn-fetch-blob';
import React, { useState } from 'react';
const UploadComponent = () => {
const [url, setUrl] = useState('');
const upload = async () => {
await RNFetchBlob.fetch(
'POST',
'https://www.example.net/api/v1/upload-image',
{
Authorization: 'Bearer token',
'Content-Type': 'application/octet-stream',
},
'base64string',
)
.then((res) => res.json())
.then((res) => {
setUrl(res.url);
});
};
return (
<div>
<button onClick={upload}>Upload</button>
<span>{url}</span>
</div>
);
};
export default UploadComponent;
index.test.js
:
import UploadComponent from './';
import { shallow } from 'enzyme';
import { act } from 'react-dom/test-utils';
import RNFetchBlob from 'rn-fetch-blob';
jest.mock(
'rn-fetch-blob',
() => {
const mRNFetchBlob = {
fetch: jest.fn(),
};
return mRNFetchBlob;
},
{ virtual: true },
);
const whenStable = async () =>
await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 10));
});
describe('60116223', () => {
it('should upload image', async () => {
const mJSON = { url: 'https://www.example.net/api/v1/upload-image' };
const mResponse = { json: jest.fn().mockReturnValueOnce(mJSON) };
RNFetchBlob.fetch.mockResolvedValueOnce(mResponse);
const wrapper = shallow(<UploadComponent></UploadComponent>);
expect(wrapper.find('span').text()).toBe('');
wrapper.find('button').simulate('click');
await whenStable();
expect(wrapper.find('span').text()).toBe(mJSON.url);
});
});
カバレッジ100%の単体テスト結果。
PASS stackoverflow/60116223/index.test.js (6.171s)
60116223
✓ should upload image (27ms)
----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
index.js | 100 | 100 | 100 | 100 |
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 8.194s
ソースコードです。 https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60116223
関連
-
[解決済み】React Nativeのバージョン不一致について
-
[解決済み] モジュールAppRegistryが呼び出し可能なモジュールとして登録されていない(runApplicationを呼び出す)。
-
[解決済み] Jestを使用して単一のテストを実行するにはどうすればよいですか?
-
[解決済み] React NativeのiOSシミュレータでフォントファミリーが認識されない件
-
[解決済み] ScrollView 内の FlatList がスクロールしない
-
[解決済み] spanのようなReactネイティブテキスト
-
[解決済み] Jestを使用して1つのファイルをテストするにはどうすればよいですか?
-
envに対する解決策:node: そのようなファイルやディレクトリはありません
-
[解決済み] React-NativeアプリでAxios GETとAuthorizationヘッダを使用する
-
[解決済み】JavaScriptで文字列をBase64にエンコードするにはどうすればいいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】React Native。未処理のプロミスリジェクトの可能性
-
[解決済み】React/RCTBridgeDelegate.h' ファイルが見つかりません。
-
[解決済み] React-Nativeでこのトランスフォームを作るには?
-
[解決済み] React NativeのiOSシミュレータでフォントファミリーが認識されない件
-
[解決済み] React Nativeでテキストを太字、斜体、下線にするにはどうすればよいですか?
-
[解決済み] spanのようなReactネイティブテキスト
-
envに対する解決策:node: そのようなファイルやディレクトリはありません
-
タスク ':app:installDebug' の実行に失敗しました。
-
[解決済み】テキストに省略記号を表示させる方法
-
[解決済み】React Nativeでfloat:rightする方法とは?