Cannot install fresh Create React App Typescript with yarn berry v 3.2.4

[vancodocton]

I'm new with Yarn, and try to use it to install fresh CRA. When I start, the error throw:

ERROR in src/App.test.tsx:8:23
TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
     6 |   render(<App />);
     7 |   const linkElement = screen.getByText(/learn react/i);
  >  8 |   expect(linkElement).toBeInTheDocument();
       |                       ^^^^^^^^^^^^^^^^^
     9 | });
    10 |

The following is the log of my console I run:

PS C:\yarn> node -v
v16.18.0
PS C:\yarn> yarn -v
1.22.19
PS C:\yarn> yarn set version stable
➤ YN0000: Retrieving https://repo.yarnpkg.com/3.2.4/packages/yarnpkg-cli/bin/yarn.js
➤ YN0000: Saving the new release in .yarn/releases/yarn-3.2.4.cjs
➤ YN0000: Done in 1s 203ms
PS C:\yarn> rm .\package.json
PS C:\yarn> yarn dlx create-react-app client --template typescript
➤ YN0000: ┌ Resolution step
➤ YN0061: │ tar@npm:2.2.2 is deprecated: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
➤ YN0000: └ Completed in 1s 665ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed
➤ YN0000: Done with warnings in 1s 908ms


Creating a new React app in C:\yarn\client.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...

➤ YN0000: ┌ Resolution step
➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged
➤ YN0061: │ svgo@npm:1.3.2 is deprecated: This SVGO version is no longer supported. Upgrade to v2.x.x.
➤ YN0061: │ stable@npm:0.1.8 is deprecated: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [579d5] doesn't provide @babel/plugin-syntax-flow (p98c2c), requested by eslint-plugin-flowtype
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [579d5] doesn't provide @babel/plugin-transform-react-jsx (p63e4d), requested by eslint-plugin-flowtype
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 1m 4s
➤ YN0000: ┌ Fetch step
➤ YN0013: │ yallist@npm:4.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yaml@npm:1.10.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs-parser@npm:20.2.9 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs@npm:16.2.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yocto-queue@npm:0.1.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 4s 304ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0007: │ core-js@npm:3.25.5 must be built because it never has been before or the last one failed
➤ YN0007: │ core-js-pure@npm:3.25.5 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 22s 172ms
➤ YN0000: Done with warnings in 1m 31s

Installing template dependencies using yarnpkg...
➤ YN0000: ┌ Resolution step
➤ YN0002: │ client@workspace:. doesn't provide @testing-library/dom (pa1f80), requested by @testing-library/user-event
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [579d5] doesn't provide @babel/plugin-syntax-flow (p98c2c), requested by eslint-plugin-flowtype
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [579d5] doesn't provide @babel/plugin-transform-react-jsx (p63e4d), requested by eslint-plugin-flowtype
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 6s 781ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ redent@npm:3.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ strip-indent@npm:3.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ typescript@npm:4.8.4 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ typescript@patch:typescript@npm%3A4.8.4#~builtin<compat/typescript>::version=4.8.4&hash=701156 can't be fou
➤ YN0013: │ web-vitals@npm:2.1.4 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 0s 977ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed in 0s 654ms
➤ YN0000: Done with warnings in 8s 649ms

We detected TypeScript in your project (src\App.test.tsx) and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

Removing template package using yarnpkg...

➤ YN0000: ┌ Resolution step
➤ YN0002: │ client@workspace:. doesn't provide @testing-library/dom (pa1f80), requested by @testing-library/user-event
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [579d5] doesn't provide @babel/plugin-syntax-flow (p98c2c), requested by eslint-plugin-flowtype
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [579d5] doesn't provide @babel/plugin-transform-react-jsx (p63e4d), requested by eslint-plugin-flowtype
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 358ms
➤ YN0000: ┌ Fetch step
➤ YN0019: │ cra-template-typescript-npm-1.2.0-910bc2f6e5-ab10999bf9.zip appears to be unused - removing
➤ YN0000: └ Completed in 0s 862ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed in 0s 345ms
➤ YN0000: Done with warnings in 1s 803ms

Success! Created client at C:\yarn\client
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd client
  yarn start

Happy hacking!
(node:5348) Warning: [Warning] The runtime detected new informations in a PnP file; reloading the API instance (C:\yarn\client\.pnp.cjs)
(Use `node --trace-warnings ...` to show where the warning was created)
PS C:\yarn> cd .\client\
PS C:\yarn\client> yarn start
(node:13424) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:13424) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Failed to compile.

[eslint] Failed to load config "react-app" to extend from.
Referenced from: C:\yarn\client\package.json
ERROR in [eslint] Failed to load config "react-app" to extend from.
Referenced from: C:\yarn\client\package.json

webpack compiled with 1 error
ERROR in src/App.test.tsx:8:23
TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
     6 |   render(<App />);
     7 |   const linkElement = screen.getByText(/learn react/i);
  >  8 |   expect(linkElement).toBeInTheDocument();
       |                       ^^^^^^^^^^^^^^^^^
     9 | });
    10 |
Compiled successfully!

You can now view client in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.102:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

webpack compiled successfully
ERROR in src/App.test.tsx:8:23
TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
     6 |   render(<App />);
     7 |   const linkElement = screen.getByText(/learn react/i);
  >  8 |   expect(linkElement).toBeInTheDocument();
       |                       ^^^^^^^^^^^^^^^^^
     9 | });
    10 |

^C
PS C:\yarn\client>

Anyone has solution?

[jj811208]

This is a CRA package dependency issue

you can run yarn add -D @types/testing-library__jest-dom to fix it

related PR:
facebook/create-react-app#11751