EuiComboBox failing in Jest environment

[jlove-dev]

Describe the bug
I've run into an issue where, even in a brand new CRA, EuiComboBox throws errors when trying to test with Jest. Specifically, here's what I see:

TypeError: Cannot set properties of undefined (setting 'font')

Which is coming from:

at new CanvasTextUtils (node_modules/@elastic/eui/lib/services/canvas/canvas_text_utils.js:59:25)
at node_modules/@elastic/eui/lib/components/combo_box/combo_box_input/combo_box_input.js:61:26

It looks like this is primarily used for the combobox, I can only find 8 files in Elastic/eui which mostly seem related.

I've also created a reproduction repo which shows this.

Impact and severity
Medium

I haven't been able to find a workaround however it does cause any components which use EuiComboBox to not have test cases. I tried to mock HTMLCanvasElement however that didn't seem to help.

Environment and versions

• EUI version: 92.2.1
• React version: 18.2.0
• Kibana version (if applicable):
• Browser: Chrome/Firefox
• Operating System: Windows

To Reproduce

Reproduction Repo

^ I made this in roughly five minutes using just CRA and installing Jest. I don't believe this is a Jest issue since it only happens with this component out of EUI but I'm open to being corrected.

Expected behavior
I would expect this error to not happen. It results in any Jest test which includes EuiComboBox to fail.

Minimum reproducible sandbox
Reproduction Repo

I'm not sure how I can add Jest to sandbox, if anyone has a suggestion on that then please let me know.

[cee-chen]

Heya @jlove-dev! The answer to this is that you need to mock the underlying CanvasTextUtils file. We've created a mock for this here:

https://github.com/elastic/eui/blob/main/src/services/canvas/canvas_text_utils.testenv.ts

You can import or require this file via:

const { CanvasTextUtils } = require('@elastic/eui/test-env/services/canvas/canvas_text_utils');

You'll then need to set up your Jest environment with a jest.mock(), which you can do either in the file(s) where you're testing EuiComboBox, or that you can pass into your Jest setupFiles config to apply to all tests. Here's EUI's own example usage:

eui/scripts/jest/setup/mocks.js

Lines 18 to 24 in 1fa8cf0

	jest.mock('./../../../src/services/canvas', () => {
	const rest = jest.requireActual('./../../../src/services/canvas');
	const {
	CanvasTextUtils,
	} = require('./../../../src/services/canvas/canvas_text_utils.testenv');
	return { ...rest, CanvasTextUtils };
	});

eui/scripts/jest/config.js

Lines 36 to 40 in ce51332

	setupFiles: [
	'<rootDir>/scripts/jest/setup/enzyme.js',
	'<rootDir>/scripts/jest/setup/throw_on_console_error.js',
	'<rootDir>/scripts/jest/setup/mocks.js',
	],

[jlove-dev]

Thank you so much @cee-chen! I really appreciate the support here and it makes sense to go about it this way.

[cee-chen]

Absolutely, anytime!! ❤️ Thanks for taking the trouble to clearly fill out the issue template and make a reproduction repo - it made answering a breeze!