Jest Test Suite Bug: Not implemented: window.computedStyle(elt, pseudoElt)

[tmastrom]

Description

Submitting this issue as tech debt to be addressed in the future.

When running the jest test suite, a console error occurs due to bugs in the react testing library. Tests still pass but there is noisy output like

PASS __tests__/Textarea.test.tsx
@button-inc/button-theme:   ● Console
@button-inc/button-theme:     console.error
@button-inc/button-theme:       Error: Not implemented: window.computedStyle(elt, pseudoElt)
@button-inc/button-theme:           at module.exports (/Users/mastro/button/service-development-toolkit/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
@button-inc/button-theme:           at Window.getComputedStyle (/Users/mastro/button/service-development-toolkit/node_modules/jsdom/lib/jsdom/browser/Window.js:795:7)
@button-inc/button-theme:           at hasPsuedoElement2 (/Users/mastro/button/service-development-toolkit/node_modules/axe-core/axe.js:16285:26)
@button-inc/button-theme:           at /Users/mastro/button/service-development-toolkit/node_modules/axe-core/axe.js:2253:30
@button-inc/button-theme:           at Object.colorContrastEvaluate (/Users/mastro/button/service-development-toolkit/node_modules/axe-core/axe.js:16331:13)
@button-inc/button-theme:           at Check.Object.<anonymous>.Check.run (/Users/mastro/button/service-development-toolkit/node_modules/axe-core/axe.js:18562:34)
@button-inc/button-theme:           at /Users/mastro/button/service-development-toolkit/node_modules/axe-core/axe.js:18698:18
@button-inc/button-theme:           at pop (/Users/mastro/button/service-development-toolkit/node_modules/axe-core/axe.js:6198:18)
@button-inc/button-theme:           at Object.defer (/Users/mastro/button/service-development-toolkit/node_modules/axe-core/axe.js:6220:11)
@button-inc/button-theme:           at /Users/mastro/button/service-development-toolkit/node_modules/axe-core/axe.js:18697:20 undefined
@button-inc/button-theme:       at VirtualConsole.<anonymous> (../../node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
@button-inc/button-theme:       at module.exports (../../node_modules/jsdom/lib/jsdom/browser/not-implemented.js:12:26)
@button-inc/button-theme:       at Window.getComputedStyle (../../node_modules/jsdom/lib/jsdom/browser/Window.js:795:7)
@button-inc/button-theme:       at hasPsuedoElement2 (../../node_modules/axe-core/axe.js:16285:26)
@button-inc/button-theme:       at ../../node_modules/axe-core/axe.js:2253:30
@button-inc/button-theme:       at Object.colorContrastEvaluate (../../node_modules/axe-core/axe.js:16331:13)
@button-inc/button-theme:       at Check.Object.<anonymous>.Check.run (../../node_modules/axe-core/axe.js:18562:34)

More info about this issue can be found here and here. A couple workarounds are outlined however functionality may be lost and the validity is not well understood.

User Story

As a developer

I want the jest test suite to run without console errors

So that test outputs are clear

Acceptance Criteria

Given	When	Then	Pass/Fail (TBD by reviewer)
I am a developer	the jest test suite is executed	Tests pass and there are no console errors

Developer notes

• At the time of writing this ticket, errors occur in the button-theme/__tests__/Textarea.test.tsx and /DatePicker.test.tsx