[BUG] Tests Crashing Due to SyntaxError in @plasmohq/storage Package

[EmilMalanczak]

What happened?

Description:
This is kind of follow up to issue #937 related to the with-jest starter repo. After manage to run the initial tests succesfully I've installed the latest @plasmohq/storage package and basic method and a test file for it.

As a result tests are crashing due to a SyntaxError caused somewhere in @plasmohq/storage package.

> [email protected] test /Users/misit/dev-work/with-jest-issue
> jest

PASS  tests/contents/index.test.ts
FAIL  tests/contents/storage.test.ts
 ● Test suite failed to run

   Jest encountered an unexpected token

   Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

   Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

   By default "node_modules" folder is ignored by transformers.

   Here's what you can do:
    • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
    • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
    • 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/configuration
   For information about custom transformations, see:
   https://jestjs.io/docs/code-transformation

   Details:

   /Users/misit/dev-work/with-jest-issue/node_modules/.pnpm/[email protected]/node_modules/pify/index.js:37
   export default function pify(input, options) {
   ^^^^^^

   SyntaxError: Unexpected token 'export'

   > 1 | import { Storage } from "@plasmohq/storage"
       | ^
     2 |
     3 | export const saveToStorage = async (key: string, value: any) => {
     4 |   const storage = new Storage()

     at Runtime.createScriptFromCode (node_modules/.pnpm/[email protected]/node_modules/jest-runtime/build/index.js:1505:14)
     at Object.<anonymous> (contents/storage.ts:1:1)
     at Object.<anonymous> (tests/contents/storage.test.ts:3:1)

PASS  tests/contents/hello.test.tsx

Test Suites: 1 failed, 2 passed, 3 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        1.695 s, estimated 2 s
Ran all test suites.
 ELIFECYCLE  Test failed. See above for more details.

Fix

For people who are struggling with the issue (including myself) found a solution for this. (for those who prefer more code fix branch from repro repo)

These steps are assuming you are starting from the starter repo after fixes from #937

• Install devDependency @babel/plugin-transform-modules-commonjs
• create babel.config.js (other variants seems not to work correctly) with following content

module.exports = {
  env: {
    test: {
      plugins: ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}

• inside jest.config.mjs:
  • add "^.+\\.js?$": "babel-jest" to the list of transform
  • add new rule transformIgnorePatterns: [],

Reproduce repo:

• link: https://github.com/EmilMalanczak/plasmo-jest-issue
• basically it's a with-jest start with proposed solutions from [BUG] Unable to Run Tests in with-jest Starter Repo #937
• storage.ts and storage.test.ts are the files related to the issue

fixed version is on fix branch

Expected Behavior:

The test suite should execute without errors.

Actual Behavior:

Tests crash with a SyntaxError, specifically encountering an unexpected token 'export' within the @plasmohq/storage package.

Additional Information:

This problem persists across different Node.js versions (tested latest v16, v18, v20)

Feel free to provide additional details or specifications, and I'll be happy to assist further!

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

No response

Relevant log output

No response

(OPTIONAL) Contribution

• I would like to fix this BUG via a PR

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.