test: check unmounting in tests (#309)

Author: KubaJastrz

babel.config.js

@@ -4,4 +4,12 @@ module.exports = {
     '@babel/react',
   ],
   plugins: ['annotate-pure-calls'],
+  env: {
+    test: {
+      presets: [
+        ['@babel/env', {targets: {node: 'current'}}],
+        '@babel/react',
+      ]
+    }
+  }
 };

package.json

@@ -29,7 +29,8 @@
   ],
   "jest": {
     "setupFilesAfterEnv": [
-      "<rootDir>test/setup.js"
+      "<rootDir>test/setup.js",
+      "@testing-library/jest-dom/extend-expect"
     ],
     "coveragePathIgnorePatterns": [
       "test/setup.js"
@@ -61,7 +62,8 @@
     "@babel/core": "^7.8.7",
     "@babel/preset-env": "^7.8.7",
     "@babel/preset-react": "^7.0.0",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^11.2.7",
     "@types/react": "^16.8.2",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^25.1.0",

test/Tippy.test.js

@@ -1,11 +1,13 @@
 import React, {useRef, useState} from 'react';
 import TippyBase from '../src';
-import {render, cleanup} from '@testing-library/react';
+import {
+  render,
+  screen,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
 
 jest.useFakeTimers();
 
-afterEach(cleanup);
-
 describe('<Tippy />', () => {
   let instance = null;
 
@@ -55,6 +57,27 @@ describe('<Tippy />', () => {
     expect(instance.popper.querySelector('strong')).not.toBeNull();
   });
 
+  test('cleans up after unmounting in tests', async () => {
+    render(
+      <Tippy
+        content="tooltip"
+        trigger="click"
+        // test will fail if animation is enabled
+        animation={false}
+      >
+        <button />
+      </Tippy>,
+    );
+
+    // open up the tooltip
+    screen.getByRole('button').click();
+    expect(screen.getByText('tooltip')).toBeInTheDocument();
+
+    // close the tooltip
+    screen.getByRole('button').click();
+    await waitForElementToBeRemoved(() => screen.queryByText('tooltip'));
+  });
+
   test('props.className: single name is added to tooltip', () => {
     const className = 'hello';