用React测试库测试文档对象

时间:2019-08-07 12:16:38

标签: reactjs jestjs react-testing-library

使用from tkinter import * from tkinter import ttk root = Tk() tree = ttk.Treeview(root) tree["columns"]=("one","two") tree.column("one", width=100 ) tree.column("two", width=100) tree.heading("one", text="coulmn A") tree.heading("two", text="column B") tree.insert("" , 0, text="Line 1", values=("1A","1b")) id2 = tree.insert("", 1, "dir2", text="Dir 2") tree.insert(id2, "end", "dir 2", text="sub dir 2", values=("2A","2B")) tree.insert(id2, "end", "dir 3", text="sub dir 2", values=("2A","2B")) ##alternatively: tree.insert("", 3, "dir3", text="Dir 3") tree.insert("dir3", 3, text=" sub dir 3",values=("3A"," 3B")) tree.pack() root.mainloop() ,我想测试一个不返回任何东西的方法。基本上,它用于下载图表(svg)。

react testing library

它是如何工作的,我创建了一个export const downloadWithLink = (imgDataUrl, fileName) => { const link = document.createElement('a') link.href = imgDataUrl document.body.appendChild(link) link.click() document.body.removeChild(link) } ,我将购物车的数据插入了a tag,然后将该链接附加到了文档中,然后点击了该链接,以便用户,然后删除链接。

使用React测试库,我正在努力了解如何测试它,因为最后该方法不会返回任何内容。所有步骤都在两者之间。

href

在其他情况下,我有组件,然后可以使用 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')) }) }) 方法,并获取render,然后触发事件单击,但事实并非如此。

关于如何解决此测试的任何想法?

1 个答案:

答案 0 :(得分:0)

如果您只想为downloadWithLink函数编写单元测试,则与reactjs无关,您可以仅通过jestjs作为简单函数对其进行测试。

例如:

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);
};

单元测试:

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);
  });
});

覆盖率100%的单元测试结果:

 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

以下是完整的演示:https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/57394312