必须编写代码以使其可测试

Question

我刚刚开始使用 Jest，我正在尝试测试此代码，该代码将在 1000 毫秒后更改元素的 textContent：

detailTextView.bounds.height

这就是 Jest 返回的内容：

 const subtext = document.querySelector('.subtext');

 function delayChangeText() {
    setTimeout(() => {
        subtext.textContent = "Dev";
    }, 1000);
}

subtext.addEventListener('load', delayChangeText);

我对测试还是很陌生，我相信我做了一个非常简单的傻事。任何帮助深表感谢。最好的问候。

Answer 1

测试的第零规则是：

必须编写代码以使其可测试

并非所有代码都可以测试。有时，您必须更改实际代码的编写方式，以便测试框架能够掌握代码。

我可以看到一两个关键问题。

首先：我假设您没有包含应用程序的全部内容，但看起来您的应用程序代码没有导出 delayChangeText 函数，这意味着其他模块（例如您的测试套件）可以不要导入它。

您可能需要在应用代码中执行类似 module.exports = delayChangeText 或 export default delayChangeText 的操作。

第二：你的函数不是纯函数。也就是说，它依赖于没有明确传递给它的东西，即它期望 subtext 在其执行上下文中定义。

并不是严格要求你的所有函数都是纯函数，事实上有时这是不可能的。但是纯函数通常更容易测试（也更容易设计和实现）。这是您的函数的纯版本：

function delayChangeText(element) {
    setTimeout(() => {
        element.textContent = "Dev";
    }, 1000);
}

您不必将其转换为纯函数，但除非您的测试套件采取措施确保 subtext.textContent 不会抛出 -- if subtext未定义，它会抛出。

这很重要还有另一个原因：如果这个模块的默认导出是 delayChangeText 函数，那么前面的 subtext 赋值甚至可能不适合在文件中。这意味着解决第一个问题（“它没有被导出”）自然会导致将函数转换为纯函数。如果您真的想避免这种情况，您可以：您可能必须将函数在测试套件中的导入方式更改为：

const { delayChangeText } = require('./delayChangeText');

最后（您还没有问这个问题——还）：您可能不希望此测试必须实际等待 1000 毫秒来测试此功能。 Jest 有一些 tools for manipulating the global timer functions，这将使您无需等待即可验证函数。

Jest 找不到模块

1 个答案:

必须编写代码以使其可测试