How do I use EUI's testenv with React?

[j-m]

Namely I'm trying to mock htmlIdGenerator so my snapshots don't complain about incorrect ids. I searched and came across #1381 and #4212, which lead me to the docs.

I tried creating a jest.config.js file and adding the following:

  moduleNameMapper: {
    "@elastic/eui$": "<rootDir>/node_modules/@elastic/eui/test-env",
  },

But this didn't seem to work. I changed my test script to:
"test": "react-scripts test --ci --collectCoverage --config jest.config.js"
to try and enforce react scripts to use my jest config, it doesn't complain so I assume it's found it.

When I add either of the following snippets directly to my test files, it works as you'd expect:

jest.mock("@elastic/eui/lib/services/accessibility/html_id_generator", () => ({
  htmlIdGenerator: () => () => "htmlId",

Originally posted by @BentoumiTech in #1381 (comment)

jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
  const { htmlIdGenerator } = jest.requireActual(
    '@elastic/eui/lib/services/accessibility/html_id_generator'
  );
  return { htmlIdGenerator: () => htmlIdGenerator('', true) };
});

Originally posted by @thompsongl in #4212 (comment)

But it seems wrong to have to do this in every test file. Any ideas, anyone?

[thompsongl]

I question whether that config file is truly being used; CRA seems to rely on the package.json config method.
As for the two snippets, the second one should not work because we opted to not add the second parameter to htmlIdGenerator.

[j-m]

Thank you! Not sure how I missed that. Also, you're right about the second one, I tried it again and, sure enough, it doesn't work. Been a long day...