Problem using `browser-fs-access` in jest

[Pet3ris]

Hi There,

I'm using jest for testing and having trouble with importing the browser-fs-access library.

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    <root>/node_modules/browser-fs-access/dist/index.js:2
    export { fileOpen } from "./file-open.mjs";
    ^^^^^^

    SyntaxError: Unexpected token 'export'

This seems to be a common issue, documented here: https://github.com/facebook/jest/issues/2550, however, the common solutions don't work.

I tried to use the following configuration parameter to account for presence of mjs files but still getting the same error. Any thoughts on how to allow jest to successfully compile browser-fs-access?

 "transformIgnorePatterns": [
   "node_modules/(?!browser-fs-access).+(js|jsx|mjs|ts)$"
 ]

[tomayac]

Sorry, I'm not familiar with Jest, but https://github.com/facebook/jest/issues/2550#issuecomment-810144368 is the right place to ask your question.

[Amatewasu]

It looks like using @Pet3ris' solution after upgrading to browser-fs-access v0.18.1 solves the issue. (#55)

I tried to use the following configuration parameter to account for presence of mjs files but still getting the same error. Any thoughts on how to allow jest to successfully compile browser-fs-access?

 "transformIgnorePatterns": [
   "node_modules/(?!browser-fs-access).+(js|jsx|mjs|ts)$"
 ]

[steveruizok]

To my great shame, I had to resort to bundling this package to commonjs.

https://github.com/steveruizok/browser-fs-access

[tomayac]

I’m not really into bundling, but I know there’s a way to publish several builds in the same package.json. If you know how this works, maybe I could ask you to contribute this back, so others can profit and you don’t have to keep your fork in sync as new stuff gets added?!

[steveruizok]

Happy to do so! The fork uses esbuild to bundle into ESM and CJS modules, which I think is what you're describing too. The only modifications were replacing your slick for await loops with regular loops because esbuild can't parse those yet.

[tomayac]

Awesome, thanks a ton! I have created https://github.com/GoogleChromeLabs/browser-fs-access/issues/82 to track this.

[dlech]

It appears that the transformIgnorePatterns workaround is still needed. Am I missing something? package.json doesn't seem to reference the cjs version anywhere.

[tomayac]

We may want to revisit bundling. It looks like microbundle is the current go-to option. I have opened https://github.com/GoogleChromeLabs/browser-fs-access/issues/94 to track this. If you have time, feel free to work on a PR that fixes this, but else, I'll also eventually get to it, but need to deal with things that popped up during my recent time off.