[Bug] create-react-app/react-scripts test fails to get correct pnpapi

[francisu]

• I'd be willing to implement a fix

Describe the bug

When using a simple Jest test that does a require('pnpapi'), it gets this error: The whole PnP file got strict-mode-ified, which is known to break (Emscripten libraries aren't strict mode). This usually happens when the file goes through Babel.

To Reproduce

1. yarn dlx create-react-app my-app
2. cd my-app/src
3. Create this test case, in pnpapi.test.js

describe('Pipapi test', () => {
  test('pnpali', async () => {
    const pnpapi = require('pnpapi');
    pnpapi.findPackageLocator();
  });
});

3. cd ..
4. yarn react-scripts test src/pnpapi.test.js
5. You will see output similar to this:

 FAIL  src/pnpapi.test.js
  Pipapi test
    ✕ pnpali (290ms)

  ● Pipapi test › pnpali

    The whole PnP file got strict-mode-ified, which is known to break (Emscripten libraries aren't strict mode). This usually happens when the file goes through Babel.

       5 |   Object.freeze({}).detectStrictMode = true;
       6 | } catch (error) {
    >  7 |   throw new Error(`The whole PnP file got strict-mode-ified, which is known to break (Emscripten libraries aren't strict mode). This usually happens when the file goes through Babel.`);
         |         ^
       8 | }
       9 | 
      10 | var __non_webpack_module__ = module;

      at Object.<anonymous> (.pnp.js:7:9)
      at Object.<anonymous> (src/pnpapi.test.js:4:20)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.532s, estimated 3s

Environment if relevant (please complete the following information):

• OS: [OSX 10.15.6]
• Node version [12.16.2]
• Yarn version [2.3.3]

[merceyz]

You need to add .pnp.js to transformIgnorePatterns, jest does that by default from >= v26.3.0 jestjs/jest#10383

[francisu]

I upgraded to 26.6.0 and have the same problem:

repoman:my-app francis$ yarn why jest
├─ my-app@workspace:.
│  └─ jest@npm:26.6.0 (via npm:^26.6.0)
│
├─ react-scripts@npm:3.4.3
│  └─ jest@npm:26.6.0 (via npm:^26.6.0)
│
└─ react-scripts@npm:3.4.3 [ddccc]
   └─ jest@npm:26.6.0 (via npm:^26.6.0)

Here is my package.json at the my-app level:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "jest": "^26.6.0",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-scripts": "3.4.3"
  },
  "resolutions": {
    "jest": "^26.6.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

The test result is the same.

[merceyz]

react-scripts uses it's own version of jest, which at the time of writing, is locked to 24.9.0

[francisu]

Right, but I overrode it with the resolution to 26.6.0 and the problem is still happening (see the yarn why above).

[merceyz]

react-scripts overwrites it with their own config https://github.com/facebook/create-react-app/blob/d07b7d025f5933710fcb01718617dbdf4bc54c33/packages/react-scripts/scripts/utils/createJestConfig.js#L52-L55 you can patch it to work around that https://yarnpkg.com/features/protocols/#patch

[francisu]

Perfect, that fixed the problem. Thanks for your time, patience, and working on yarn 2. I'm really liking it.