質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

UIテスト

UIテストは、エンドツーエンドのテストのことで、人間がチェックする際と同じ内容をテストが自動で行います。UIの操作はもちろん、サーバーへのレスポンスやリクエスト、サーバーでのロジック処理など、全レイヤーを通してテストすることが可能。汎用性が高い点も特長です。

Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

Q&A

解決済

1回答

1000閲覧

@react-native-clipboard/clipboardのsetStringをjestでmockしようとした際に、関数ではないと起こられる。

nakam_taro

総合スコア15

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

UIテスト

UIテストは、エンドツーエンドのテストのことで、人間がチェックする際と同じ内容をテストが自動で行います。UIの操作はもちろん、サーバーへのレスポンスやリクエスト、サーバーでのロジック処理など、全レイヤーを通してテストすることが可能。汎用性が高い点も特長です。

Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

0グッド

0クリップ

投稿2022/12/18 01:42

前提

現在react-nativeでアプリ開発を行なっていますが、対象の文字列をクリップボードでコピーさせる実装を行なっています。

対象のライブラリは「import Clipboard from '@react-native-clipboard/clipboard';」を使用しており、
Clipboard.setString(contactId);
という処理を入れればクリップボードにコピーされるような実装になります。

実現したいこと

jestでmockをし、関数が呼ばれていることの検証を行いたい。

発生している問題・エラーメッセージ

上記の実行をjestでmockし、テストをしたいと思っています。その際に、以下のエラーが発生して解決できません。

TypeError: _clipboard.default.setString is not a function

該当のソースコード

// 関数が呼ばれているかのmock const mockedSetString = jest.fn(); jest.mock('@react-native-clipboard/clipboard', () => { return { ...jest.requireActual('@react-native-clipboard/clipboard'), Clipboard: () => ({ setString: mockedSetString }), }; }); // react-nativeで起こられるエラーのため、以下もmock jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter'); // 以下がテスト内容 render(コンポーネント読み込み); const copyButton = screen.getByText('対象のボタン名を入れる'); fireEvent.press(copyButton); // spyonも試しましたが、上手くいきませんでした(これもmockしてみた) // const copyToClipboardSpy = jest.spyOn(Clipboard, "setString"); // 以下が検証したいテスト expect(mockedSetString).toHaveBeenCalledTimes(1);

試したこと

・spyonによる検証や、
・jest.mock('@react-native-clipboard/clipboard', () => {
による検証も色々変えたりして試したりしましたが、それでも上手くいかず、、、

・関数ではないと出て、戻り値もvoidなので、jest.fn()が行けないのかな?と思いつつググっても分からず

みたいな状況になります。

大変申し訳ありませんが、助けて頂けると幸いです。

補足情報(FW/ツールのバージョンなど)

"react": "17.0.2",
"react-native": "0.68.2",
"@react-native-clipboard/clipboard": "^1.11.1",
"@testing-library/jest-native": "^4.0.11",
"@testing-library/react-native": "^11.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^28.1.8",

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

色々模索や公式ドキュメントを見ながら格闘した結果、

const mockedSetString = jest.fn(); jest.mock('@react-native-clipboard/clipboard', () => { return { setString: () => { mockedSetString() }, } });

このような形にすると動作が上手くいきました。
22名の方のご視聴ありがとうございました。

投稿2022/12/19 12:09

nakam_taro

総合スコア15

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問