用React测试库测试文档对象

Question

With react testing library I want to test a method that it does not return anything. Basically it is used to download a chart (svg).

export const downloadWithLink = (imgDataUrl, fileName) => {
  const link = document.createElement('a')
  link.href = imgDataUrl
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

How it works, I create an a tag , I insert the data of the cart in the href , I append the link to the document, I click it so that the file is downloaded by the user, and then I remove the link.

Using the React testing library, I am struggling to understand how to test it, since, in the end, the method does not return anything. All the steps are in between.

  describe('downloadWithLink', () => {
    it('creates and removes the download a tag', () => {
      const generateFileName = jest.fn()
      generateFileName.mockReturnValue('foo_file_name')
      expect(downloadWithLink('foo_img_data_url', 'foo_name'))
    })
  })

In other scenarios I have components, then I can use the render method, and get the getByTestId and then fire the event click, but that's not the case.

Any ideas about how to tackle this test?

Answer 1

If you only want to write a unit test for downloadWithLink function, it's nothing related with reactjs , you can test it as a simple function only with jestjs .

For example:

index.ts :

export const downloadWithLink = (imgDataUrl, fileName) => {
  const link = document.createElement('a');
  link.href = imgDataUrl;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

Unit test:

index.spec.ts :

import { downloadWithLink } from './';

describe('downloadWithLink', () => {
  it('t1', () => {
    const anchorMocked = { href: '', click: jest.fn() } as any;
    const createElementSpyOn = jest.spyOn(document, 'createElement').mockReturnValueOnce(anchorMocked);
    document.body.appendChild = jest.fn();
    document.body.removeChild = jest.fn();
    downloadWithLink('https://github.com/mrdulin', 'test name');
    expect(createElementSpyOn).toBeCalledWith('a');
    expect(document.body.appendChild).toBeCalledWith(anchorMocked);
    expect(anchorMocked.click).toBeCalledTimes(1);
    expect(document.body.removeChild).toBeCalledWith(anchorMocked);
  });
});

Unit test result with 100% coverage:

 PASS  src/stackoverflow/57394312/index.spec.ts (6.666s)
  downloadWithLink
    ✓ t1 (13ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
 index.ts |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        7.595s

Here is the completed demo: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/57394312