Layer component stays rendered in test suites

Expected Behavior

When testing the Layer component with React-Testing-Library each instance of test should render a new component.

Actual Behavior

The Layer component remains rendered to the testing DOM despite providing a cleanup function afterEach(cleanup). This causes tests to fail as duplicates of the component are found.

URL, screen shot, or Codepen exhibiting the issue

https://codesandbox.io/s/grommet-v2-template-forked-66prc?file=/modal.test.js

CodeSandbox is having issues running tests but this is an example.

Steps to Reproduce

Create a component utilizing Grommet’s Layer component, run test with React-Testing-Library, notice the Layer remains rendered across multiple tests.

Your Environment

Only noticed after bumping to Grommet 2.17.2

• Grommet version: 2.17.2

[taysea]

Hey Andrew! Thanks so much for putting the repo together and documenting this so clearly. @jcfilben, @britt6612, and I have been looking into this today, and I wanted to summarize our findings for you here:

1. Since portals (which Layer is built using) render outside of the root div , we need to explicitly clear them beforeEach test involving them because the react testing library cleanup function doesn’t handle it (https://stackoverflow.com/questions/67298821/jest-react-testing-library-portals-are-not-being-cleaned-up). Grommet does this in a function called createPortal which ensures that the DOM is cleared out before the test: https://github.com/grommet/grommet/blob/master/src/js/utils/portal.js#L4

Within our Layer-test file, we call beforeEach(createPortal) Because your testing setup doesn’t include this beforeEach function, the portal is not being cleared out between tests. This is unrelated to grommet 2.17.2. I cloned your repo and reverted the dependency versions to match the react, react-dom, testing-library, and grommet versions that we used at grommet v2.16.3 and saw the tests failing with the same errors as you’re experiencing here. However, once I added the beforeEach everything is working as expected.

WITH beforeEach:

It seems like the reason your project was passing prior but not with grommet v2.17.1 or 2.17.2 is because React 16 and lower treated useEffect differently (synchronously) than useEffect is treated in React 17 (asynchronously). Given this, we made an adjustment in grommet v2.17.1 to Layer to use useLayoutEffect (which runs synchronously like useEffect had in older versions of React).

Recommendation: Add the following to your jest

beforeEach(() => {
  // make sure to remove all body children
  document.body.innerHTML = '';
  document.body.appendChild(document.createElement('div'));
})

[jcfilben]

In react-dom v17 useEffect is changed to run asynchronously, so we switched Layer to use useLayoutEffect which runs synchronously which is the old behavior of useEffect. This change fixed an issue with the Layer animation but it don’t think it would be related to the tests and I don’t think it would cause the Layer to persist between tests.

I did notice in the codesandbox that was shared above the versions for the react and react-dom are v16 instead of v17 so I think this is likely the cause of the problem