問題タブ [formik]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
12749 参照

javascript - jest/enzyme を使用した formik コンポーネントの単体テスト

うまく機能する非常に基本的なお問い合わせフォームをまとめました。しかし、ユニットテストの作成を開始する必要があり、多くの問題に遭遇しました (これまでのところ、文字通りスナップショットテストに合格することしかできなかったなど)。

まず、必要なセクションをすべて入力していない場合に、送信ボタンをクリックしたときにフォームが検証メッセージをレンダリングする必要があることをテストしようとしています。

handleSubmit()関数 を呼び出すことでこれを達成できると思いました。componentRender.find('Formik').instance().props.handleSubmit(badFormValues, { resetForm });

ただし、実行するcomponentRender.debug()と、検証メッセージがレンダリングされません。validationSchema関数が呼び出されていないようですか?

何か特別なことをしなければならないことはありますか? 関数が機能しているように感じmapPropsToValues()ます。状態オブジェクトを見ると、フォームに渡す値が入力されています。検証がスキップされているように見える理由がわかりませんか?

私はこれに2日間携わってきましたが、グーグルで良い例を見つけることができません(おそらく私のせいです)ので、どんな助けも大歓迎です。

参考までに、これまでのテストファイルは次のとおりです。

そして、ここに私のwithFormik()機能があります:

0 投票する
1 に答える
1450 参照

typescript - コンポーネントをテストする方法は、JestとEnzymeを使用してReact(ネイティブ)で親コンポーネントの機能を与えられていますか?

私は React Native アプリを構築しており、単体テストには Jest と Enzyme を使用しています。さらに、TypeScript を使用しています。

Formikを使用して次のフォームを作成します。

見ての通りシンプルなフォルムです。<Formik />コンポーネントが渡さrenderForm()れたことをテストしたいhandleSubmitので、次のテストを書きました。

についても同じですrenderForm()。残念ながら、これはエラーをスローします:

そのため、関数がコンポーネントを通過したことを正しくテストする方法がわかりません。どうすればこれを行うことができますか?

私が機能することがわかった方法が1つありました。これは、次のように関数を渡すことでした<Formik />:

そして、ちょうど:

問題は、そのような関数を渡したときに、過去に単体テストで問題が発生したことです。また、この方法で TypeScript の型を失います。最初の試行を機能させる方法はありますか」