测试功能时开玩笑测试不更新 DOM答案

【问题标题】：Jest test not updating the DOM when testing out a function测试功能时开玩笑测试不更新 DOM
【发布时间】：2020-12-15 21:02:26
【问题描述】：

在我的测试中，我创建了一个名为 postData 的函数，它通过 Promise 返回模拟 json 数据。我用它来测试使用 postData 函数将 json 数据添加到 DOM 的 urlValidation 函数。我还在测试中添加了 DOM。

testUrl.spec.js


import { urlValidation } from '../client/js/urlValidation';
import { printData } from '../client/js/checkStatement';


test('Testing url Validation', () => {

 document.body.innerHTML = `
 <body>

 <header>
     <div class="logo">
         Logo
     </div>
     <div class="title">
         Title
     </div>
     <div class="menu">
         <ul>
             <li><a href="#">Home</a></li>
             <li><a href="#">Contact</a></li>
             <li> <a href="#">Body</a></li>
             <li><a href="#">Footer</a></li>
         </ul>
     </div>
 </header>

 <main>
     <section class="form-section">
         <form class="blog-entry-text" onsubmit="return Client.checkStatement(event)">
             <input id="text-input" type="text" name="input" value="" placeholder="Enter Text">            
             <button onclick="return Client.checkInput(event)">SubmitInput</button>
         </form>
         <form class="blog-entry-url">
             <input id="text-url" type="text" name="input" value="" placeholder="Enter Text">            
             <button onclick="return Client.checkUrl(event)">SubmitURL</button>
         </form>
     <section>

     <section class="form-results">
         <strong>Form Results:</strong>
         <div id="results"></div>
     </section>
 </main>

 <footer>
     <p>This is a footer</p>
 </footer>
</body>`

  const postData = (input1, input2) => { return Promise.resolve({
     text: 'Hello',
     language: 'en',
     categories: [
         {
         label: 'religious festival or holiday - easter',
         code: '12014002',
         confidence: 0.54
         }
     ]
     })
 };
 
 urlValidation('What is going on', postData);
 expect(document.querySelector('#results').innerHTML).toEqual(`<p>Text Data: Testing Input</p><p>Label: religious festival or holiday - easter</p>`)
});

urlValidation 函数接受一个函数作为参数，然后从 promise 返回的 json 数据中将值添加到 DOM。

urlValidations.js

const urlValidation = (inputText, callback) => {
    const inputData = {input: inputText};
    callback("http://localhost:8080/classify-url", inputData).then(data =>{
        console.log(data);
        printData(inputData, data);
    });
};

print Data 函数操作 DOM 并将数据添加到网页中。

printData.js

function printData(dataObj, data) {
    console.log(`Data: ${data} DataObj: ${dataObj}`);
    const results = document.getElementById('results');
    const languageSystem = document.createDocumentFragment();
    const p = document.createElement('p');
    p.innerHTML = `Text Data: ${dataObj.input}`;
    languageSystem.appendChild(p);
    if (data.categories.length == 0) {
        const label = document.createElement('p');
        label.innerHTML = `Label: None`;
        languageSystem.appendChild(label);
    } else {
        data.categories.forEach(element => {
            console.log(element);
            const label = document.createElement('p');
            label.innerHTML = `Label: ${element.label}`;
            languageSystem.appendChild(label);
            console.log(`Label: ${languageSystem.innerHTML}`);
        });
    }

    console.log(data);
    console.log(`Results: ${languageSystem.innerHTML}`);
    results.appendChild(languageSystem);

}

当我运行测试时，我得到了这个结果：

Expected: "<p>Text Data: Testing Input</p><p>Label: religious festival or holiday - easter</p>"
    Received: ""

      68 |     
      69 |     urlValidation('What is going on', postData);
    > 70 |     expect(document.querySelector('#results').innerHTML).toEqual(`<p>Text Data: Testing Input</p><p>Label: religious festival or holiday - easter</p>`)
         |                                                          ^
      71 |   });

      at Object.toEqual (src/__tests__/testUrl.spec.js:70:58)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        4.036 s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

这很奇怪，因为我进行了一个测试，我能够将 json 数据直接添加到 printData 函数并且该测试工作正常。

我还做了一堆console.log，看看json数据是否正确传递给printData函数，结果好像就是这样。

    console.log
      Label: religious festival or holiday - easter

      at log (src/client/js/checkStatement.js:45:21)
          at Array.forEach (<anonymous>)

    console.log
      {
        text: 'Hello',
        language: 'en',
        categories: [
          {
            label: 'religious festival or holiday - easter',
            code: '12014002',
            confidence: 0.54
          }
        ]
      }

      at log (src/client/js/checkStatement.js:49:13)

我很确定做错了什么，但我就是想不通。

【问题讨论】：

标签： javascript unit-testing jestjs

【解决方案1】：

这要归功于 Estus Flask，因为他帮助我理解这是一种比赛条件。

所以我必须将测试更改为异步测试。

test('Testing url Validation', async () => {
....

并在运行预期的测试之前添加等待以等待结果

await urlValidation('What is going on', postData);
expect(document.querySelector('#results').innerHTML).toEqual(`<p>Text Data: What is going on</p><p>Label: religious festival or holiday - easter</p>`)

再次感谢 Estus Flask，感谢您的帮助！

【讨论】：

【解决方案2】：

由于存在未链接的承诺而导致竞争条件。

urlValidation 应该返回一个承诺：

return callback("http://localhost:8080/classify-url", inputData).then(...);

然后它可以在测试或任何其他需要顺序执行的地方等待：

await urlValidation('What is going on', postData);
expect(...)

【讨论】：

谢谢，这正是我所需要的。你太棒了！