Jest 找不到模塊

Question

我剛開始使用 Jest，我正在嘗試測試此代碼，該代碼將在 1000 毫秒后更改元素的 textContent：

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

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

subtext.addEventListener('load', delayChangeText);

這是 Jest 返回的內容：

FAIL  js/app.test.js
  ● Test suite failed to run

Cannot find module './delayChangeText' from 'js/app.test.js'

> 1 | const delayChangeText = require('./delayChangeText');
    | ^
  2 |
  3 | test('Change the text after 1000 seconds', () => {
  4 |     expect(delayChangeText().toBe(subtext.textContent = "Dev"));
  at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:311:11)
  at Object.<anonymous> (js/app.test.js:1:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.846 s

我對測試還是很陌生，我相信我做了一個非常簡單的傻事。 任何幫助深表感謝。 最好的祝福。

Answer 1

測試的第零規則是：

代碼必須編寫成可測試的

並非所有代碼都可以測試。 有時，您必須更改實際代碼的編寫方式，以便測試框架可以掌握代碼。

我可以看到一兩個關鍵問題。

第一：我假設您沒有包含應用程序的全部內容，但看起來您的應用程序代碼沒有導出delayChangeText函數，這意味着其他模塊（例如您的測試套件）無法導入它。

您可能需要執行類似module.exports = delayChangeText ，或者在您的應用程序代碼中export default delayChangeText 。

第二：你的函數不是純函數。 也就是說，這取決於這不是傳遞給它明確的東西，即它預期subtext是它的執行上下文中定義。

並不是嚴格要求您的所有函數都是純函數，實際上有時這是不可能的。 但是純函數通常更容易測試（也更容易設計和實現）。 這是您的函數的純版本：

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

您不必將其轉換為一個純粹的功能，但除非你的測試套件采取措施，以確保您的代碼將在測試中打破subtext.textContent不會拋出-如果subtext是不明確的，它會拋出。

這是另一個重要原因：如果這個模塊的默認出口是delayChangeText功能，那么它可能不適合前面的subtext分配即使是在文件中。 這意味着解決第一個問題（“它沒有被導出”）自然會導致將函數轉換為純函數。 如果您真的想避免這種情況，您可以：您可能必須將函數在測試套件中的導入方式更改為：

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

最后（並且您沒有問這個問題——還沒有）：您可能不希望此測試實際上必須等待 1000 毫秒來測試此功能。 Jest 有一些用於操作全局計時器函數的工具，這將使您無需等待即可驗證該函數。