the issue happens when I try to run test script and pre-existing playwright spec is failing. I've upgraded some packages recently due to migration from webpack to rspack, this includes jest@29, eslint@9.
Playwright has been recently added to the repo by my co-worker and tests are running fine on his end. I assume there might be some peer-dependency issue internally in playwright that is a cause, but have been banging my head on the wall all day and can't figure out what's the culprit.
Full error log:
TypeError: ys.deprecate is not a function
> 1 | import { test, expect } from '@playwright/test';
| ^
2 | import { login } from './utils/helpers';
3 |
4 | test.describe('Login happy paths', () => {
at node_modules/playwright-core/lib/utilsBundleImpl/index.js:2:9075
at node_modules/playwright-core/lib/utilsBundleImpl/index.js:1:324
at node_modules/playwright-core/lib/utilsBundleImpl/index.js:6:268
at node_modules/playwright-core/lib/utilsBundleImpl/index.js:1:324
at Object.<anonymous> (node_modules/playwright-core/lib/utilsBundleImpl/index.js:182:14404)
at Object.<anonymous> (node_modules/playwright-core/lib/utilsBundle.js:30:33)
at Object.<anonymous> (node_modules/playwright-core/lib/server/registry/index.js:22:20)
at Object.<anonymous> (node_modules/playwright-core/lib/server/index.js:102:17)
at Object.<anonymous> (node_modules/playwright-core/lib/inProcessFactory.js:7:15)
at Object.<anonymous> (node_modules/playwright-core/lib/inprocess.js:3:25)
at Object.<anonymous> (node_modules/playwright-core/index.js:33:18)
at Object.<anonymous> (node_modules/playwright/lib/index.js:34:49)
at Object.<anonymous> (node_modules/playwright/test.js:17:13)
at Object.<anonymous> (node_modules/@playwright/test/index.js:17:18)
at Object.require (tests/auth.spec.ts:1:1)
Also secondary error that comes from jest after upgrading:
Test suite failed to run
TypeError: Cannot read properties of undefined (reading 'isNativeError')
at failureDetailsToErrorOrStack (node_modules/jest-message-util/build/index.js:426:17)
at Array.map (<anonymous>)
there is no other output from this particular test and the file doesn't refer to isNativeError anywhere. This must be internal jest thing.
I've tried to downgrade to 28 and 27 with no luck.
EDIT:
auth.spec.ts
import { test, expect } from '@playwright/test';
test.describe('Login happy paths', () => {
test('has title', async ({ page }) => {
await page.goto('/');
await expect(page.getByRole('heading', { name: 'Login' })).toBeVisible();
});
});
package.json
{
"name": "<PROJECT_NAME",
"version": "2.3.0",
"description": "",
"main": "index.js",
"scripts": {
"build-dev": "webpack --config config/webpack/webpack.dev.js --progress",
"build-local": "webpack --config config/webpack/webpack.local.js --progress",
"build-uat": "webpack --config config/webpack/webpack.uat.js --progress",
"build-prod": "webpack --config config/webpack/webpack.prod.js --progress",
"start": "webpack serve --hot --config config/webpack/webpack.local.js --open",
"rspstart": "rspack serve --hot --config config/rspack/rspack.local.js",
"eslint": "eslint \"src/**/*.{js,ts,tsx}\"",
"eslint:fix": "eslint \"src/**/*.{js,ts,tsx}\" --fix",
"test": "cross-env TZ=UTC jest",
"test:watch": "cross-env TZ=UTC jest --watchAll",
"test:coverage": "cross-env TZ=UTC jest --coverage",
"test:debug": "cross-env TZ=UTC jest --detectOpenHandles",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"typecheck": "tsc",
"playwright": "npx playwright test",
"playwright:ui": "npx playwright test --ui port 0",
"playwright:report": "npx playwright show-report"
},
"author": "",
"license": "",
"engines": {
"node": ">=14",
"npm": ">=7"
},
"overrides": {
"@jest/create-cache-key-function": "<=27.5.1",
"react-native": "^0.70.6"
},
"dependencies": {
"@floating-ui/react": "^0.27.2",
"@playwright/test": "^1.49.1",
"@reduxjs/toolkit": "^1.9.7",
"@types/highcharts": "^7.0.0",
"aws-amplify": "^6.11.0",
"axios": "^1.7.9",
"classnames": "^2.5.1",
"date-fns": "2.23.0",
"file-saver": "2.0.5",
"git-rev-sync": "^3.0.2",
"highcharts": "^11.2.0",
"highcharts-react-official": "^3.2.1",
"ip": "1.1.5",
"lodash": "^4.17.21",
"lodash.debounce": "^4.0.8",
"polished": "^4.3.1",
"react": "17.0.2",
"react-beautiful-dnd": "^13.1.1",
"react-color": "2.19.3",
"react-dom": "17.0.2",
"react-hook-form": "^7.54.2",
"react-icons": "^4.10.1",
"react-loading-skeleton": "^3.5.0",
"react-markdown": "^8.0.7",
"react-quill": "^2.0.0",
"react-redux": "7.2.5",
"react-rnd": "^10.4.14",
"react-router-dom": "5.3.0",
"react-select": "^5.9.0",
"react-switch": "^7.1.0",
"react-tooltip": "4.2.21",
"react-transition-group": "^4.4.5",
"react-virtualized-auto-sizer": "^1.0.25",
"react-window": "^1.8.11",
"react-window-infinite-loader": "^1.0.9",
"redux": "4.1.1",
"redux-thunk": "2.3.0",
"styled-components": "5.3.1",
"styled-theming": "2.2.0",
"typescript": "^5.7.2",
"uuid": "8.3.2",
"webfontloader": "^1.6.28"
},
"devDependencies": {
"@babel/core": "^7.23.7",
"@babel/eslint-parser": "7.15.4",
"@babel/node": "7.15.4",
"@babel/plugin-proposal-nullish-coalescing-operator": "7.14.5",
"@babel/plugin-proposal-optional-chaining": "7.14.5",
"@babel/plugin-syntax-dynamic-import": "7.8.3",
"@babel/plugin-transform-runtime": "7.15.0",
"@babel/preset-env": "7.15.4",
"@babel/preset-react": "7.14.5",
"@babel/preset-typescript": "^7.16.0",
"@babel/runtime": "^7.3.1",
"@rspack/cli": "^1.1.8",
"@rspack/core": "^1.1.8",
"@rspack/plugin-react-refresh": "^1.0.1",
"@storybook/addon-actions": "^7.6.20",
"@storybook/addon-essentials": "^7.6.20",
"@storybook/addon-links": "^7.6.20",
"@storybook/react": "^7.6.20",
"@storybook/react-webpack5": "^7.6.20",
"@svgr/webpack": "^8.1.0",
"@swc/core": "^1.10.4",
"@swc/plugin-styled-components": "^5.0.2",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "12.0.0",
"@testing-library/user-event": "^13.5.0",
"@types/file-saver": "^2.0.7",
"@types/fork-ts-checker-webpack-plugin": "^0.4.5",
"@types/jest": "^29.5.14",
"@types/lodash.debounce": "^4.0.9",
"@types/node": "^16.18.122",
"@types/react": "^17.0.83",
"@types/react-beautiful-dnd": "^13.1.8",
"@types/react-color": "^3.0.13",
"@types/react-dom": "^18.0.3",
"@types/react-router-dom": "^5.3.3",
"@types/react-select": "^5.0.1",
"@types/react-transition-group": "^4.4.12",
"@types/react-virtualized-auto-sizer": "^1.0.4",
"@types/react-window": "^1.8.8",
"@types/react-window-infinite-loader": "^1.0.9",
"@types/redux-mock-store": "^1.5.0",
"@types/styled-components": "^5.1.25",
"@types/styled-theming": "^2.2.8",
"@types/uuid": "^9.0.8",
"@types/webfontloader": "^1.6.38",
"@types/webpack": "^4.41.31",
"@types/webpack-dev-server": "^4.7.2",
"@typescript-eslint/eslint-plugin": "^8.19.0",
"@typescript-eslint/parser": "^8.19.0",
"@webpack-cli/serve": "1.5.2",
"as-a": "^2.2.7",
"autoprefixer": "10.3.4",
"babel-jest": "27.1.0",
"babel-loader": "8.2.2",
"babel-plugin-istanbul": "6.0.0",
"babel-plugin-styled-components": "1.13.2",
"clean-webpack-plugin": "4.0.0",
"copy-webpack-plugin": "9.0.1",
"cross-env": "^7.0.3",
"css-loader": "6.2.0",
"css-minimizer-webpack-plugin": "3.0.2",
"dotenv-webpack": "^7.0.3",
"eslint": "9.17",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-jest": "28.9",
"eslint-plugin-react": "^7.37.3",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-storybook": "^0.11.2",
"eslint-rspack-plugin": "^4.2.1",
"eslint-webpack-plugin": "^4.2.0",
"file-loader": "6.2.0",
"fork-ts-checker-webpack-plugin": "^9.0.2",
"globals": "^15.14.0",
"html-webpack-plugin": "5.3.2",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-styled-components": "7.0.5",
"jsdom": "^25.0.1",
"mini-css-extract-plugin": "2.2.2",
"nyc": "15.1.0",
"postcss": "^8.4.49",
"postcss-loader": "^8.1.1",
"postcss-preset-env": "^10.1.2",
"prettier": "2.3.2",
"react-select-event": "^5.5.1",
"react-test-renderer": "17.0.2",
"redux-devtools-extension": "2.13.9",
"redux-mock-store": "^1.5.5",
"storybook": "^7.6.8",
"style-loader": "3.2.1",
"terser-webpack-plugin": "5.2.3",
"ts-checker-rspack-plugin": "^1.1.0",
"ts-loader": "^9.5.1",
"ts-node": "^10.9.2",
"url-loader": "4.1.1",
"webpack": "^5.52.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "5.8.0"
}
}
Running rspstart works fine. Only the test or test:watch fails on the E2E - only after migration.
When updating packages some had peer dependency issues but these were purely related to webpack and eslint - I run few of these with --legacy-peer-deps flag to be able to uninstall redundant webpack plugins.
Also rebuilding package-lock.json with clean install breaks a lot more things - maybe these should be addressed first?
From your packages.json,, you're trying to use jest to run playwright tests, which is wrong because Playwright uses its own test runner.
At least I don't see anything like jest-playwright in deps.
"test": "cross-env TZ=UTC jest",
"test:watch": "cross-env TZ=UTC jest --watchAll",
You have
"playwright": "npx playwright test"
for this.