test: add React Testing Library

[ktmud]

SUMMARY

Implement [SIP-56] Adopt React Testing Library for testing React components.

• Add React Testing Library
• Updated the setup files
• Convert a couple of existing components with the new library

As demonstrated in the new code, with RTL, we are able to easily test the use of the useEffect hook with DOM updates, that is previously not possible to do in Enzyme. Just make sure to use waitFor to wait for the DOM change, otherwise you may encounter an update inside a test was not wrapped in act(...) errors.

Another lesson learned is that in order to use waitFor, you must explicitly add a jest-environment: jsdom docblock to the test file, because the default jest environment jest-enzyme is incompatible with RTL.

/**
 * @jest-environment jsdom
 */

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

N/A

TEST PLAN

CI

ADDITIONAL INFORMATION

• Has associated issue:
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[codecov-io]

Codecov Report

Merging #11771 (54e905c) into master (872a54d) will not change coverage.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master   #11771   +/-   ##
=======================================
  Coverage   67.29%   67.29%           
=======================================
  Files         905      905           
  Lines       43862    43862           
  Branches     4201     4201           
=======================================
  Hits        29519    29519           
  Misses      14239    14239           
  Partials      104      104           

Flag	Coverage Δ
cypress	55.12% <100.00%> (ø)
javascript	62.86% <100.00%> (+0.01%)	⬆️
python	63.64% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
superset-frontend/src/components/Label/index.tsx	100.00% <ø> (ø)
superset-frontend/src/components/Timer.tsx	95.83% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 872a54d...ae3f033. Read the comment docs.

[graceguo-supercat]

LGTM