Clean up document after test is finished

[camdub]

Since this matcher appends the rendered content to the document (i.e., document.body.innerHTML = html), I noticed that other tests that render to the document via react-testing-librarycause there to be two instances of the component in the tree.

To avoid this, I added the following:

afterEach(() => {
  document.body.innerHTML = ''
})

However, it seems like this would best be handled by jest-axe itself. I can create a PR if needed.

[NickColley]

Hey @camdub,

That sounds sensible to me, I wonder if we could cleanup before we resolve the promise here:

https://github.com/nickcolley/jest-axe/blob/master/index.js#L40

Would love a pull request and I can publish this for you. 👍

[camdub]

@NickColley that was my thought too on the best way to do the cleanup.

I'll look to make a PR.

[thomasheyenbrock]

I stumbled upon the same problem recently! Good to see I'm not the only one. 😅

Clearing the content of document.body is a step in the right direction. But I think now you can't do any more assertions after running axe.

import React from "react";
import { axe, toHaveNoViolations } from "jest-axe";
import { render } from "react-testing-library";

expect.extend(toHaveNoViolations);

it("should be able to make multiple assertion", async () => {
  const { container, getByText } = render(<h1>Hello world!</h1>);
  expect(await axe(container.innerHTML)).toHaveNoViolations();
  // I think this will fail, since document.body is empty now :(
  expect(getByText("Hello world!")).toBeInTheDocument();
})

[NickColley]

@thomasheyenbrock hmm, I've not published anything yet so we've got time to get this right.

Do you have an suggestions on an alternative way to solve this problem?

[thomasheyenbrock]

I proposed a solution in #52

[NickColley]

Published as version 3.1.1 thanks again.

[kentcdodds]

Note, if you're using react-testing-library you should be using cleanup.

[NickColley]

@kentcdodds if you want to feel free to open a PR to update the readme with that advice