私はwebpackにバンドルされたReact + Redux webを構築しました。バンドルエラーが発生したため、私のWebはFUOCの動作を開始しました（一部のコンポーネントはCSSレスポンスにCSSを挿入しなかったため、最後のCSSがロードされる前にアプリケーションのスタイルのない部分がありました）。他のエラーには、第三者コンポーネントのFUOCが含まれていました（手動作業が必要でした）。WebpackにバンドルされたWebをFUOCに対して自動的にテストする方法は？
私はサーバーとウェブのさまざまな部分の自動テストを行っています。しかし、どうすれば私のnode.jsツールチェインを使ってFOUCを自動的にテストできますか？私はセレンやファントムズについて苦労していますが、これは過剰なもののように思えますが、どうして私がそれを検出できるかはまだ分かりません。
FOUCで保証された要素を適用することによってFOUCが防止されるのは、CSSが完全に読み込まれている場合にのみ表示されます。簡単にするために、私はそれを全身に適用します。例えば：彼らはまだ描かれている間
body {
opacity: 0;
}
はその後、後でいくつかのコンポーネントとCCSファイルまたはロード中...
body {
opacity:1;
}
これは効果的にレンダリング時間の間、要素が非表示になります。これから逆に作業することで、要素/コンポーネントのCSSの読み込み前に実行される単体テストを作成して、可視性や要素が表示される前にロードする必要があるその他のCSSプロパティをテストできます。トリックは、これらのテストが要素のレンダリングの各段階で適切な時間に実行されるようにすることです。
// Test for FOUC load component then verify for no visiblity ...
expect($('#testElement').is(':visible')).toBe(false)
/**
* load component/elemnt css here then ...
*/
// then test for visibility or other css properties ...
expect($('#testElement').is(':visible')).toBe(true)
このエラーは何ですか？解決しようとした？ – Thaadikkaaran
@JaganathanBantheswaranエラーはありません。合理的なアプローチについてはわかりません。さらに、私は、（ヘッドレスの）ブラウザ全体を実行せずに、簡単で簡単なJSベースのテストを実行することなく、「簡単で軽い」ソリューションを好むでしょう。 – muffel
ウェブパックの設定を共有 – Thaadikkaaran