How to compare innerHTML in jest

Question

I am a newbie to jest and JavaScript. I am trying to write a test to compare innerHTML. It is not working. Any ideas how to make it work?

I am attaching sample code below which contains relevant parts of the file.

listCurrency.js

function setFromCurrency(currency) {
    document.getElementById("initial-currency").innerHTML = `
    <select onchange ="getCurrencyA(this.value)"><option>Choose a Currency</option>${Object.values(currency).map(function (name) {return `<option>${name.code} ${name.description}</option>`}).join("")};</select>
    `;
}

module.exports = { setFromCurrency };

listCurrency.test.js

/**
 * @jest-environment jsdom
 */
const { expect } = require('@jest/globals');
const { setFromCurrency } = require('./listCurrency');
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const mockCurrency = {
    symbols: {
        Symbol: {
            description: "Country Name",
            code: "Symbol"
        }
    }
};
const currencyStr = `
<select onchange ="getCurrencyA(this.value)"><option>Choose a Currency</option>${Object.values(mockCurrency.symbols).map(function (name) {return `<option>${name.code} ${name.description}</option>`}).join("")};</select>
`;

test('should give currency list', () => {
    document.body.innerHTML = `<div id="initial-currency"></div>`;
    setFromCurrency(mockCurrency); 
    const fromCurrency = document.getElementById("initial-currency");
    expect(fromCurrency.innerHTML).toBe(currencyStr);
})

I am getting the following error when I run npm test:

$ npm test

> currency-converter@1.0.0 test C:\Users\...
> jest

 FAIL  ./listCurrency.test.js  
  × should give currency list (20 ms)

  ● should give currency list

    expect(received).toBe(expected) // Object.is equality

    - Expected  - 2
    + Received  + 2

      ↵
    - <select onchange ="getCurrencyA(this.value)"><option>Choose a Currency</option><option>Symbol Country Name</option>;</select>
    +     <select onchange="getCurrencyA(this.value)"><option>Choose a Currency</option><option>undefined undefined</option>;</select>
    -
    +

      39 |     setFromCurrency(mockCurrency);
      40 |     const fromCurrency = document.getElementById("initial-currency");
    > 41 |     expect(fromCurrency.innerHTML).toBe(currencyStr);
         |                                    ^
      42 | })

      at Object.<anonymous> (listCurrency.test.js:41:36)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:387:19)
      at _run10000 (node_modules/@jest/core/build/cli/index.js:408:7)
      at runCLI (node_modules/@jest/core/build/cli/index.js:261:3)

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

Answer 1

First, you have an excessive nesting in mockCurrency

const mockCurrency = {
        Symbol: {
            description: "Country Name",
            code: "Symbol"
        }

};

Second, you setFromCurrency you have line breaking with different indentations. It's a good practice to test trimmed versions of those strings.

expect(fromCurrency.innerHTML.trim()).toBe(currencyStr.trim())