How to write jest test case for addEventListener and DOM for vanilla javascript

Viewed 208

Here is app.js file, I believe, I have to use spyon and jest.fn but not sure how to do that. Also I'm not sure how to show expected dom because it is throwing this error "Support for the experimental syntax 'jsx' isn't currently enabled" as of now, for below code, I'm getting this error

enter image description here

 button.addEventListener("click", display);
    
    function display() {
        displayTable.style.display = "block"
        obj.move.push(input.value);
        let bulldozerMove = obj.move[obj.move.length - 1];
        let index = obj.initPos[obj.initPos.length - 1];
        let direction = obj.initDir[obj.initDir.length - 1];
        solution(
            grid,
            index,
            direction,
            bulldozerMove
        );
        let newRow = displayTable.insertRow(-1);
        key.forEach((val) => {
            let insertData = obj[val];
            for (let i = 0; i < 1; i++) {
                let newCell = document.createElement("td");
                newCell.style.border = 'solid 1px black';
                newCell.appendChild(document.createTextNode(insertData[insertData.length - 1]));
                newRow.appendChild(newCell);
            }
            tableBody.appendChild(newRow);
        })
        displayTable.appendChild(tableBody);
        document.body.appendChild(displayTable);
    }

Here is app.test.js file

    describe('addEventListener', () => {
test('call callback function', () => {
  const display = jest.fn();
  button.addEventListener('click', display);
  expect(display).toHaveBeenCalled(1);
});

})

0 Answers
Related