Ariakit can't be imported when using Create React App and Jest

[Eldor901]

Current behavior

Steps to reproduce the bug

https://github.com/Eldor901/Ariakit-jest

Expected behavior

Jest tests should not fail

Workaround

Eject and update the moduleFileExtensions option to include cjs.

Possible solutions

We can potentially fix this on our build script by including the .cjs extension on the package.json files inside the proxy folders:

ariakit/scripts/build/utils.js

Lines 263 to 264 in 8e4d7e6

	main: join(prefix, mainDir, moduleName),
	module: join(prefix, moduleDir, moduleName),

The same way we do here for the main package.json:

ariakit/scripts/build/utils.js

Lines 67 to 68 in 8e4d7e6

	main: prod ? join(cjsDir, "index.cjs") : join(sourceDir, "index.ts"),
	module: prod ? join(esmDir, "index.js") : join(sourceDir, "index.ts"),

[diegohaz]

Could you please provide a link with the reproduction code (repository, CodeSandbox, StackBlitz)?

Anyway, I don't recommend using JSDOM (if you're using it with Jest) to test components that use Ariakit or any other accessible component library. You will need a real browser to test most interactions.

[Eldor901]

Could you please provide a link with the reproduction code (repository, CodeSandbox, StackBlitz)?

Anyway, I don't recommend using JSDOM (if you're using it with Jest) to test components that use Ariakit or any other accessible component library. You will need a real browser to test most interactions.

@diegohaz https://github.com/Eldor901/Ariakit-jest.

[Eldor901]

Is there a specific reason why you don't recommend JSDom and Jest for testing? I think Jest (with JSDom) is one of the most popular ways to write unit tests for JavaScript applications.

[diegohaz]

Thanks for the reproduction.

Looks like it's an issue with Create React App that ships with a custom moduleFileExtensions option that doesn't include cjs. There's an open PR on the CRA repo that would fix this: facebook/create-react-app#12605

The last CRA release was over a year ago, and it's super outdated. I don't recommend it for new projects. If you want to keep using it, I suggest ejecting (which would allow you to update the Jest config). Or just use Vite.

[diegohaz]

Is there a specific reason why you don't recommend JSDom and Jest for testing? I think Jest (with JSDom) is one of the most popular ways to write unit tests for JavaScript applications.

You can use JSDOM, but you'll likely see a lot of act warnings from React. That's because Ariakit performs some actions asynchronously. JSDOM doesn't flush them automatically as the browser does, so you'll have to do extra work before and after triggering events.

We do use JSDOM to test Ariakit components internally, but we have an internal @ariakit/test package that makes JSDOM behave more like a real browser.

I recommend using a more robust testing framework like Playwright to test your components and pages.