NickFitton commented 11 months ago

Current Behavior

A vanilla generated app cannot be tested.

Expected Behavior

nx test rn-demo       
> nx run rn-demo:test

PASS   demo  apps/demo/src/app/App.spec.tsx
  ● renders correctly

Test Suites: 1 passed 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.063 s
Ran all test suites.

 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Ran target test for project rn-demo (1s)

    ✖    0/1 failed
    ✔    1/1 succeeded [0 read from cache]

GitHub Repo

https://github.com/NickFitton/react-native-nx-testing-issues

Steps to Reproduce

pnpx create-nx-workspace
✔ Where would you like to create your workspace? · rn-demo
✔ Which stack do you want to use? · react
✔ What framework would you like to use? · react-native
✔ Application name · rn-demo
✔ Enable distributed caching to make your CI faster · No

cd rn-demo
nx test rn-demo

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 18.17.0
   OS     : darwin-arm64
   pnpm   : 8.6.12

   nx (global)        : 17.0.3
   nx                 : 17.0.3
   @nx/js             : 17.0.3
   @nx/jest           : 17.0.3
   @nx/eslint         : 17.0.3
   @nx/workspace      : 17.0.3
   @nx/detox          : 17.0.3
   @nx/eslint-plugin  : 17.0.3
   @nx/react-native   : 17.0.3
   @nrwl/tao          : 17.0.3
   typescript         : 5.1.6


### Failure Logs

```shell
nx test rn-demo       

> nx run rn-demo:test

watchman warning:  Recrawled this watch 1 times, most recently because:
MustScanSubDirs UserDroppedTo resolve, please review the information on
https://facebook.github.io/watchman/docs/troubleshooting.html#recrawl
To clear this warning, run:
`watchman watch-del '{route to project}/rn-demo' ; watchman watch-project '{route to project}/rn-demo'`

 FAIL   demo  apps/demo/src/app/App.spec.tsx
  ● 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:

    {route to project}/demo/node_modules/.pnpm/@react-native+js-polyfills@0.72.1/node_modules/@react-native/js-polyfills/error-guard.js:14
    type ErrorHandler = (error: mixed, isFatal: boolean) => void;
         ^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

      at Runtime.createScriptFromCode (../../node_modules/.pnpm/jest-runtime@29.7.0/node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (../../node_modules/.pnpm/react-native@0.72.4_@babel+core@7.23.2_@babel+preset-env@7.23.2_react@18.2.0/node_modules/react-native/jest/setup.js:16:6)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.063 s
Ran all test suites.

 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Ran target test for project demo (1s)

    ✖    1/1 failed
    ✔    0/1 succeeded [0 read from cache]



### Package Manager Version

_No response_

### Operating System

- [X] macOS
- [ ] Linux
- [ ] Windows
- [ ] Other (Please specify)

### Additional Information

_No response_

NickFitton commented 11 months ago

What else have you tried:

transformIgnorePatterns: ['node_modules/(?!@react-native|react-native)'],
Install and add @babel/preset-typescript to babel.config.json

Solution

Add transformIgnorePatterns and add /.pnpm to the standard ignore pattern:

  transformIgnorePatterns: [
    'node_modules/.pnpm/(?!@react-native|react-native)',
  ],

github-actions[bot] commented 5 months ago

This issue has been automatically marked as stale because it hasn't had any activity for 6 months. Many things may have changed within this time. The issue may have already been fixed or it may not be relevant anymore. If at this point, this is still an issue, please respond with updated information. It will be closed in 21 days if no further activity occurs. Thanks for being a part of the Nx community! 🙏

nrwl / nx

Default react-native project does not have correct ignore patterns #20073