This is my first time using jest, jsdom. After completing the primary coding for my web application, I am trying to test my JS code using jest. I am trying to test a JS code snippet which returns a table row element with 2 columns for the column data provided.

This is createTableRow is the function I am trying to test. JS file: printResults.js

/*
* createTableRow FUNCTION
* @description: Populate table data in a table row with 2 columns
* @param {string} col1: string content for table colum 1
* @param  {string} col2: string content for table colum 2
*/
function createTableRow(col1, col2) {

    console.log('inputData', col1, col2);
    const table__row = document.createElement('tr');
    const table__data__1 = document.createElement('td');
    table__data__1.innerText = col1;
    const table__data__2 = document.createElement('td');
    table__data__2.innerText = col2;
    table__row.appendChild(table__data__1);
    table__row.appendChild(table__data__2);

    return table__row
}

I am trying to test this in jest. Jest file: printResults.spec.js

/**
 * @jest-environment jsdom
 */
import {createTableRow} from '../src/client/js/printResults'
describe("Create Row Element", () => {
    test("Create a row element with 2 columns", () => {

        expect(createTableRow("c1", "c2").outerHTML).toBe('<tr><td>c1</td><td>c2</td></tr>');
    });
});

This test fails with below error.

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

    Expected: "<tr><td>c1</td><td>c2</td></tr>"
    Received: "<tr><td></td><td></td></tr>"

The createTableRow function works correctly outside of jest. The table is populated with all the rows and the rows do have data.

I am not able to understand why in jest the table rows have not data? And if there is a limitation with innerText for jest, how do I test for the correct working of my code?