如何针对 FUOC 自动测试我的 webpack 捆绑网络？

Posted 2023-03-08

【中文标题】如何针对 FUOC 自动测试我的 webpack 捆绑网络？

【英文标题】：How to automatically test my webpack-bundled web against FUOC?

【发布时间】：2017-02-25 12:50:33

【问题描述】：

我已经构建了一个与 webpack 捆绑在一起的 React + Redux web。由于捆绑错误，我的 Web 开始显示 FUOC 行为（某些组件没有将其 CSS 注入服务器响应，因此在加载最终 CSS 之前应用程序的无样式部分“闪烁”）。其他错误包括第 3 方组件的 FUOC（需要手动操作）。

我对服务器和我的网络的不同部分进行了自动化测试。但是如何自动测试 FOUC（使用我的 node.js 工具链）？我对 selenium 和 phantomjs 持怀疑态度，但这似乎有点矫枉过正，我仍然不知道如何检测到它。

【问题讨论】：

错误是什么？试图解决？

@JaganathanBantheswaran 没有错误，我只是不确定一个合理的方法。此外，我更喜欢“简单”和“轻量级”的解决方案，而不是运行整个（无头）浏览器，而是简单的基于 JS 的测试。

分享你的 webpack 配置

SauceLabs 是一个选项吗？除了配置它不需要做太多事情，他们为你做了繁重的工作

@JaganathanBantheswaran 我的 webpack 配置没有什么特别之处（不过，由于输出网络很少，它是自动生成的）。我想做的是测试最终的 web，最好是 webpack-agnostic。

【参考方案1】：

我通过确保带有 FOUC 的元素仅在其 CSS 完全加载时可见来防止 FOUC。为了简单起见，我将它应用于整个身体。例如：

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)