-
Notifications
You must be signed in to change notification settings - Fork 2.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
nx test: Jest unit tests are failing to run in any test that has been imported from other libraries. #10100
Comments
Think I have the same error. I created a repository to reproduce starting from scratch with react. |
I'm not sure what change you're looking for the nx team to make to fix this as this looks to be an issue with the nx-plus/vue plugin being use. creating libs with I noticed that the vue lib makes a babel.config.js file vs .babelrc file + root babel.config.json file that nx uses. this might be something you can look into to see if there is something there. |
hey @barbados-clemens , thank you for the response, I have been looking at this error on Angular and React projects as well, the Comment from @Marcelh1983 has a react repo that reproduces the issue, I think I can find another time by end of this week to provide another repo in an angular project as well. PD: I have been looking into this on existing repos, I have tried to implement that the docs point but the example given is not clear, if I try to import this: Also, I followed the thread here as per your official issue closed 22 days ago, but, the repo is not accessible and the video doesn't seem to help me either. |
I am rebuilding a workspace to double-check all of this. but in the meantime can you try using require syntax for imports? we are running the ts project register in our e2e tests so that should work, but I just looked at them and they are using but that should only be needed for the global setup/teardown as ts paths are available at that point to jest. but within a test they should mapped already. |
update using libs within another lib works just fine in testing for both angular and react. only thing I ran into is the global setup/teardown with react seems to error out. so checking on that but the same setup/teardown works just fine in angular 🤔 will share repo when I get a chance |
Hi @barbados-clemens thanks for checking and helping! Can you reproduce the error I got with a new nx setup and a jest test using an external library. In my case the error occurs when I'm using an external component from node_modules that contains an |
@Marcelh1983 to test run |
I added my test in your repos and it fails with the same exception. Could have something todo with the package it use.
|
I was able to get the data lib to pass via adding transformIgnorePatterns: ["/node_modules/(?!rx-basic-store)"], to the jest.config.ts and then the testjest app still seems to be having issues even with the |
@barbados-clemens thanks, That works! |
I can reproduce this with a new react workspace; following https://nx.dev/react-tutorial/01-create-application. Not even modifying any of the files; I added the transform ignore and
https://nx.app/runs/rXGssNRGlFG ➜ nx test
> nx run site:test
FAIL site apps/site/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:
/home/matt/personal/website/apps/site/src/app/app.spec.tsx:4
import { render } from '@testing-library/react';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1728:14)
at TestScheduler.scheduleTests (../../node_modules/@jest/core/build/TestScheduler.js:333:13)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 0.564 s
Ran all test suites. ➜ nx report
> NX Report complete - copy this into the issue template
Node : 16.14.2
OS : linux x64
npm : 8.5.0
nx : 14.1.4
@nrwl/angular : Not Found
@nrwl/cypress : 14.1.4
@nrwl/detox : Not Found
@nrwl/devkit : 14.1.4
@nrwl/eslint-plugin-nx : 14.1.4
@nrwl/express : Not Found
@nrwl/jest : 14.1.4
@nrwl/js : 14.1.4
@nrwl/linter : 14.1.4
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : 14.0.3
@nrwl/nx-plugin : Not Found
@nrwl/react : 14.1.4
@nrwl/react-native : Not Found
@nrwl/schematics : Not Found
@nrwl/storybook : 14.1.4
@nrwl/web : 14.1.4
@nrwl/workspace : 14.1.4
typescript : 4.6.4
rxjs : 6.6.7
---------------------------------------
Community plugins: |
Just tried it and the default tests pass. didn't need to change anything. so I'm not sure what issues you're running into. Can you share the repo @matt-forster ? > NX Report complete - copy this into the issue template
Node : 16.15.0
OS : darwin arm64
npm : 8.5.5
nx : 14.1.4
@nrwl/angular : Not Found
@nrwl/cypress : 14.1.4
@nrwl/detox : Not Found
@nrwl/devkit : 14.1.4
@nrwl/eslint-plugin-nx : 14.1.4
@nrwl/express : Not Found
@nrwl/jest : 14.1.4
@nrwl/js : 14.1.4
@nrwl/linter : 14.1.4
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : 14.0.3
@nrwl/nx-plugin : Not Found
@nrwl/react : 14.1.4
@nrwl/react-native : Not Found
@nrwl/schematics : Not Found
@nrwl/storybook : 14.1.4
@nrwl/web : 14.1.4
@nrwl/workspace : 14.1.4
typescript : 4.6.4
rxjs : 6.6.7
---------------------------------------
Community plugins:
|
@barbados-clemens - Yep. Vanilla (no changes): https://github.com/matt-forster/website-new/tree/6603d3901505c81a15e76fa9e9270735cd2e8b77 Steps:
|
it works for me @matt-forster |
@barbados-clemens Huh - It works the first time, but then as soon as I change something, it starts failing. If you change a file (I changed |
this is pretty wild @matt-forster as doing the exact same thing works for me. the only thing I could assume here is the different OS. It looks like you're on linux while I'm on macOS. |
WSL2 VM from Win 11; ➜ bat /etc/*-release
───────┬──────────────────────────────────────────────────────────────────────────────────────────
│ File: /etc/lsb-release
│ Size: 104 B
───────┼──────────────────────────────────────────────────────────────────────────────────────────
1 │ DISTRIB_ID=Ubuntu
2 │ DISTRIB_RELEASE=20.04
3 │ DISTRIB_CODENAME=focal
4 │ DISTRIB_DESCRIPTION="Ubuntu 20.04.4 LTS"
───────┴──────────────────────────────────────────────────────────────────────────────────────────
───────┬──────────────────────────────────────────────────────────────────────────────────────────
│ File: /etc/os-release
│ Size: 382 B
───────┼──────────────────────────────────────────────────────────────────────────────────────────
1 │ NAME="Ubuntu"
2 │ VERSION="20.04.4 LTS (Focal Fossa)"
3 │ ID=ubuntu
4 │ ID_LIKE=debian
5 │ PRETTY_NAME="Ubuntu 20.04.4 LTS"
6 │ VERSION_ID="20.04"
7 │ HOME_URL="https://www.ubuntu.com/"
8 │ SUPPORT_URL="https://help.ubuntu.com/"
9 │ BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
10 │ PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
11 │ VERSION_CODENAME=focal
12 │ UBUNTU_CODENAME=focal
───────┴────────────────────────────────────────────────────────────────────────────────────────── |
I'm going to ping some other people on the nx team that have windows machines to see if they can take a look if it is the OSes causing the issue. I'd be surprised if it was but it's the only thing different that I can see. if it is. I imagine it might be a jest issue vs nx set up issue, but I'll have to dig into it if we can reproduce it via WSL. |
I've talked to some co-workers using the same or similar env, and they can reproduce it. It is widely inconsistent though. Other info; using Volta as node manager, nx installed globally using Volta. Other than that I don't think anything else would even remotely affect it. It might have something to do with the lock, I committed some more changes (including the updated lock after first install) and now the tests fail immediately for me after a fresh clone. |
the reason the tests pass initially is more than likely the nx cloud cache just an FYI. you can check as it'll say |
Hey @barbados-clemens , I have been working on a solution for this and I was able to fix most of the issue, But I still have an issue with NX libraries. Created a PR (marimendez88/of-jest-issue#2 / branch
So the issue is still that jest doesn't recognize NX Libraries Paths, the 2 tests are able to see the actual VUEcomponent, The error comes when using libraries |
Hey, Just wanted to let you know I found a workaround, is working pretty well so far, let's see how it goes in the next weeks when I start creating new tests ;) https://www.marimendez88.dev/posts/nx-vue-jest-support |
i think there is an issue with the version on @barbados-clemens repo the test works, after runing
|
Maybe this is usefull i downgraded to this versions and error is not happening any more
|
@BePasquet import { getJestProjects } from '@nrwl/jest';
export default {
projects: getJestProjects(),
}; and in your root jest.preset.js const nxPreset = require('@nrwl/jest/preset').default; // note the .default here!
module.exports = { ...nxPreset }; |
Hi @barbados-clemens i updated the versions, added that code to the config and preset and is working thanks a lot for the help
|
Here's what I had to do to get jest tests working after updating to ionic v6 using react in an nx project: // <root>/apps/<app-name>/jest.config.js
const esModules = [
'@ionic/core',
'@stencil/core',
'ionicons',
'@ionic/react',
'@ionic/react-router',
'@ionic/react-test-utils',
].join('|');
module.exports = {
displayName: 'tn-app',
preset: '../../jest.preset.js',
transform: {
'^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
'^.+\\.[tj]sx?$': 'ts-jest',
},
transformIgnorePatterns: [
`/node_modules/(?!${esModules})`,
'/node_modules/@stencil/core/internal/app-data',
],
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
coverageDirectory: '../../coverage/apps/tn-app',
}; Update tsconfig to target es6: // <root>/apps/<app-name>/tsconfig.json
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"jsx": "react-jsx",
"allowJs": true,
"skipLibCheck": true,
"target": "es6",
"lib": ["dom", "dom.iterable", "esnext", "es2017.object"],
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"include": ["src", "src/**/*.d.ts"],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
}
]
} Did the same thing for libs in our nx monorepo |
This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context. |
Current Behavior
An NX - Ionic and Vue workspace fails to run tests, many solutions tested and any seems to fix the issue:
This is the error message:
Solutions tested:
Related Issues:
#8323
#7844
#8354
#9825
ionic-team/ionic-framework#25223
Investigation made:
import { registerTsProject } from 'nx/src/utils/register';
always mark an error because is not recognizable.Expected Behavior
Steps to Reproduce
Here you can find a minimal repository to reproduce the issue:
https://github.com/marimendez88/of-jest-issue
npm install @nrwl/cypress@^13.0.0 @nrwl/jest@^13.0.0 @nrwl/linter@^13.0.0 --save-dev
npm install @nx-plus/vue --save-dev
nx g @nx-plus/vue:app sample-app
npm i @ionic/vue npm i @ionic/vue-router
nx g @nx-plus/vue:lib sample-lib
Failure Logs
This is the error message:
Environment
The text was updated successfully, but these errors were encountered: