如何自动testing我的webpack捆绑网站对付FUOC？

我已经构build了一个与webpack捆绑在一起的React + Redux Web。 由于绑定错误，我的网站开始显示FUOC行为（有些组件没有将其CSS注入到服务器响应中，因此在加载最终的CSS之前，应用程序的未被devise的部分会“闪现”）。 其他错误包括第三方组件的FUOC（这需要手动工作）。

我有自动testing的服务器和我的networking的不同部分。 但是，如何自动testingFOUC（使用我的node.js工具链）呢？ 我想到selenium和幻影，但这似乎是一个矫枉过正，我仍然不知道如何能够发现它。

Answer 1

我通过确保FOUC的元素只在CSS满载时才可见，从而防止FOUC。 为了简单起见，我把它应用到整个身体。 例如：

body { opacity: 0; } 

然后，稍后在CCS文件或加载一些组件…

 body { opacity:1; } 

这在渲染时间期间有效地隐藏了元素，而这些元素仍然被绘制。 因此，您可以创build一个unit testing，在加载元素/组件的CSS之前运行，以testing元素变得可见之前应该加载的可见性或其他CSS属性。 诀窍是确保这些testing在元素渲染的每个阶段的适当时间运行。

 // 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)