Question

我正在尝试将一些常见的设置/拆卸代码封装成如下功能：

export function testWithModalLifecycle() {
  beforeEach(() => {
    const modalRootDom = document.createElement('div')
    modalRootDom.id = ModalRootDomId
    document.appendChild(modalRootDom)
  })
  afterEach(() => {
    const modalRootDom = document.getElementById(ModalRootDomId)
    if (modalRootDom) {
      modalRootDom.remove()
    }
  })
}

在需要的测试中使用它：

describe('Modal', () => {
  testWithModalLifecycle()

  it('should render a modal', () => {
    //...
  })
})

但是似乎从未调用过我的设置/拆卸代码。难道我做错了什么？这有可能吗？

Answer 1

这有可能吗？

是的，有可能。

您的函数只需要像在您自己所做的那样在函数体内同步调用beforeEach和afterEach，就需要在{{1}体内同步调用该函数}回调，您也正在这样做。

我设置了一个测试，并遇到describe的错误，但是如果该行更改为document.appendChild，那么它将正常工作：

util.js

document.body.appendChild

code.test.js

export const ModalRootDomId = 'myid';

export function testWithModalLifecycle() {
  beforeEach(() => {
    const modalRootDom = document.createElement('div');
    modalRootDom.id = ModalRootDomId;
    document.body.appendChild(modalRootDom);  // <= append to the body
  });
  afterEach(() => {
    const modalRootDom = document.getElementById(ModalRootDomId);
    if (modalRootDom) {
      modalRootDom.remove();
    }
  });
}

开玩笑地将设置/拆卸代码封装到一个函数中

1 个答案: