使用 Jest 监视或模拟 document.createElement

Question

I need to test some code that creates an element on document that is assigned a URL and then clicked.

I am using Jest.

const link = document.createElement('a')

I gave up trying to mock document as I can't see a simple way to do it, although it would have been nice to mock out the click.

I need to know that createElement happened, so I decided to create a spy:

jest.spyOn(document, 'createElement')

For some reason the spy is breaking the test and I get the same error that I got when trying to mock document:

Error:  TypeError: Cannot set property 'href' of undefined

The code below the document.createElement is:

link.href = url

Any ideas?

Answer 1

Here is the solution, I use node.js runtime environment for demo:

class Link {
  private name: string;
  private _href: string = '';
  constructor(name) {
    this.name = name;
  }

  get href() {
    return this._href;
  }

  set href(url) {
    this._href = url;
  }
}

const document = {
  createElement(name) {
    return new Link(name);
  }
};

function createLink(url) {
  const link = document.createElement('a');
  link.href = url;
  return link;
}

export { createLink, document, Link };

Unit test:

import { createLink, document, Link } from './';

describe('createLink', () => {
  it('t1', () => {
    const url = 'https://github.com/mrdulin';
    jest.spyOn(document, 'createElement').mockReturnValueOnce(new Link('mock link'));
    const link = createLink(url);
    expect(link).toBeInstanceOf(Link);
    expect(link.href).toBe(url);
  });
});

 PASS  src/stackoverflow/57088724/index.spec.ts
  createLink
    ✓ t1 (6ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.451s, estimated 3s

Answer 2

While working on my latest open source project ( TabMerger ), I came up with a simpler solution and think it is much more intuitive and can help someone who is struggling. Also, it can be adapted according to your needs very easily.

// function to test
function exportJSON() {
  chrome.storage.local.get("groups", (local) => {
    var group_blocks = local.groups;
    chrome.storage.sync.get("settings", (sync) => {
      group_blocks["settings"] = sync.settings;
 
      var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(group_blocks, null, 2));
      
      // want to test all of below also!!
      var anchor = document.createElement("a");
      anchor.setAttribute("href", dataStr);
      anchor.setAttribute("download", AppHelper.outputFileName() + ".json");
      anchor.click();
      anchor.remove();
    });
  });
}

To test, I simply mock the return value of the document.createElement function to return an anchor object which can be spied on:

describe("exportJSON", () => {
  it("correctly exports a JSON file of the current configuration", () => {
    // ARRANGE
    // creates the anchor tag as an object
    function makeAnchor(target) {
      return {
        target,
        setAttribute: jest.fn((key, value) => (target[key] = value)),
        click: jest.fn(),
        remove: jest.fn(),
      };
    }
    
    // spy on the document.createElement and mock its return
    // also spy on each anchor function you want to test
    var anchor = makeAnchor({ href: "#", download: "" });
    var createElementMock = jest.spyOn(document, "createElement").mockReturnValue(anchor);
    var setAttributeSpy = jest.spyOn(anchor, "setAttribute");
    var clickSpy = jest.spyOn(anchor, "click");
    var removeSpy = jest.spyOn(anchor, "remove");
     
    // create expectations
    var group_blocks = JSON.parse(localStorage.getItem("groups"));
    group_blocks["settings"] = JSON.parse(sessionStorage.getItem("settings"));
    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(group_blocks, null, 2));

    jest.clearAllMocks(); // start with clean mocks/spies before call is made
    
    // ACT
    AppFunc.exportJSON();
    
    // ASSERT
    // chromeLocalGetSpy, chromeSyncGetSpy defined elsewhere as
    // jest.spyOn(chrome.storage.local, "get") & jest.spyOn(chrome.storage.sync, "get"), respectively.
    expect(chromeLocalGetSpy).toHaveBeenCalledTimes(1);
    expect(chromeLocalGetSpy).toHaveBeenCalledWith("groups", anything);

    expect(chromeSyncGetSpy).toHaveBeenCalledTimes(1);
    expect(chromeSyncGetSpy).toHaveBeenCalledWith("settings", anything);

    expect(document.createElement).toHaveBeenCalledTimes(1);
    expect(document.createElement).toHaveBeenCalledWith("a");

    expect(setAttributeSpy).toHaveBeenCalledTimes(2);
    expect(setAttributeSpy).toHaveBeenNthCalledWith(1, "href", dataStr);
    expect(setAttributeSpy).toHaveBeenNthCalledWith(2, "download", AppHelper.outputFileName() + ".json");

    expect(clickSpy).toHaveBeenCalledTimes(1);
    expect(removeSpy).toHaveBeenCalledTimes(1);

    createElementMock.mockRestore(); // restore document.createElement so that it is unchanged in other tests
  });
});

Result

exportJSON
    √ correctly exports a JSON file of the current configuration (48 ms)

Code

Full code is available on my GitHub

You can see that localStorage & sessionStorage are used to mock the chrome.storage.local & chrome.storage.sync API, respectively, in the <rootDir>/tests/__mocks__/chromeMock.js folder.