运行测试 React 测试库后重置 document.body

Question

After each test, I would like to reset the document.body since I am adding some classes on document.body . I was under the impression that react testing library would reset it after each test, but it seems that it is reusing the document since classes added in the previous test are still visible in the next test when using debug .

Answer 1

RTL's cleanup function will not clear the HTML element className attribute. See v12.1.5/src/pure.js#L102 of cleanup :

function cleanup() {
  mountedContainers.forEach(cleanupAtContainer)
}

// maybe one day we'll expose this (perhaps even as a utility returned by render).
// but let's wait until someone asks for it.
function cleanupAtContainer(container) {
  act(() => {
    ReactDOM.unmountComponentAtNode(container)
  })
  if (container.parentNode === document.body) {
    document.body.removeChild(container)
  }
  mountedContainers.delete(container)
}

It will do three things:

1. Unmount the component rendered inside the container (the HTML div element by default) HTML element.
2. The container HTML element will be removed from document.body .
3. Deleted from the mountedContainers JS Set .

So if you want to reset/restore the className at document.body element, you need to do it by yourself. The afterEach() / afterAll() hooks is the right place to do it.

afterEach(() => {
  document.body.className = '';
});

test('t-1', () => {
  document.body.className = 'test-1';
  //...
});

test('t-1', () => {
  document.body.className = 'test-2';
  //...
});

There is only one document.body element created by JSDOM. So don't think RTL will create a document.body before running each test case and clean it up after each test when using the render function. The render function will create a container .