[Question]: Get `test() can only be called in a test file` error while I run `npx playwright test`

[suedar]

Your question

I was running npx playwright test as tutorial saying.

But I got this error. Anyone know how to solve this. Thanks.

[mxschmitt]

Do you have Jest or Jest-playwright installed?

[suedar]

here is my package.json

{
  "name": "webs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "test": "jest",
  },
  "dependencies": {
    "@playwright/test": "^1.12.3",
    "antd": "^4.11.2",
    "axios": "^0.18.0",
    "browser-detect": "^0.2.28",
    "classnames": "^2.2.6",
    "customize-cra": "^1.0.0",
    "dayjs": "^1.10.3",
    "emoji-regex": "^9.2.1",
    "htmr": "^0.10.1",
    "i18next": "^11.9.1",
    "jasmine-expect": "^5.0.0",
    "jest-playwright-preset": "^1.7.0",
    "js-sha256": "^0.9.0",
    "lodash": "^4.17.11",
    "mobile-detect": "^1.4.5",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-helmet-async": "^1.0.9",
    "react-i18next": "^11.8.8",
    "react-loadable": "^5.5.0",
    "react-pro-components": "^0.0.1-alpha.42",
    "react-redux": "^5.0.7",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.1.7",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "ssc-ui-react": "0.0.1-alpha.134",
    "styled-components": "^5.2.1",
    "tailwindcss": "^2.0.2",
    "ts-jest": "^27.0.3",
    "twin.macro": "^2.1.0",
    "uatu-lib": "^0.5.1",
    "uuid": "8.3.2",
    "uuidv4": "^6.2.6"
  },
  "devDependencies": {
    "@babel/core": "7.12.10",
    "@babel/plugin-proposal-optional-chaining": "^7.12.7",
    "@babel/plugin-transform-typescript": "^7.12.1",
    "@babel/preset-typescript": "^7.12.7",
    "@svgr/webpack": "2.4.1",
    "@types/classnames": "^2.2.11",
    "@types/enzyme": "^3.10.8",
    "@types/enzyme-adapter-react-16": "^1.0.6",
    "@types/googlemaps": "^3.43.2",
    "@types/i18next": "^13.0.0",
    "@types/lodash": "^4.14.168",
    "@types/node": "^14.14.22",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.2",
    "@types/react-i18next": "^8.1.0",
    "@types/react-loadable": "^5.5.4",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "@types/styled-components": "^5.1.7",
    "@types/webpack": "^4.41.26",
    "@typescript-eslint/eslint-plugin": "^4.14.0",
    "@typescript-eslint/parser": "^4.14.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "9.0.0",
    "babel-jest": "^23.6.0",
    "babel-loader": "8.0.4",
    "babel-plugin-import": "^1.13.3",
    "babel-plugin-macros": "^3.0.1",
    "babel-plugin-named-asset-import": "^0.2.2",
    "babel-preset-react-app": "^5.0.4",
    "bfj": "6.1.1",
    "case-sensitive-paths-webpack-plugin": "2.1.2",
    "chalk": "2.4.1",
    "css-loader": "1.0.0",
    "cz-conventional-changelog": "^2.1.0",
    "dotenv": "6.0.0",
    "dotenv-expand": "4.2.0",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.7.1",
    "eslint": "5.6.0",
    "eslint-config-react-app": "^3.0.4",
    "eslint-loader": "2.1.1",
    "eslint-plugin-babel": "^5.2.1",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-react": "7.11.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "file-loader": "2.0.0",
    "fs-extra": "7.0.0",
    "html-webpack-plugin": "4.0.0-alpha.2",
    "husky": "^1.3.1",
    "identity-obj-proxy": "3.0.0",
    "jest": "^27.0.6",
    "jest-pnp-resolver": "1.0.1",
    "jest-resolve": "23.6.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "0.4.3",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "playwright": "^1.12.3",
    "pnp-webpack-plugin": "1.1.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-preset-env": "6.0.6",
    "postcss-safe-parser": "4.0.1",
    "react-app-polyfill": "^2.0.0",
    "react-dev-utils": "^6.0.5",
    "react-test-renderer": "^16.7.0",
    "resolve": "1.8.1",
    "sass-loader": "7.1.0",
    "sitemap": "3.0.0",
    "style-loader": "0.23.0",
    "svg-sprite-loader": "^5.0.0",
    "terser-webpack-plugin": "1.1.0",
    "ts-migrate": "^0.1.13",
    "url-loader": "1.1.1",
    "webpack": "4.19.1",
    "webpack-bundle-analyzer": "^3.0.3",
    "webpack-dev-server": "3.1.9",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "3.6.2"
  },
  "jest": {
    "preset": "jest-playwright-preset"
  },
}

here is my jest.config.js

module.exports = {
  preset: 'jest-playwright-preset',
  testEnvironmentOptions: {
    'jest-playwright': {
      // Options...
    },
  },
  'coverageProvider': 'babel',
  'resolver': 'jest-pnp-resolver',
  'testMatch': [
    '<rootDir>/test/**/?(*.)(spec|test).{js,jsx}'
  ],
  'testEnvironment': 'jsdom',
  'testURL': 'http://localhost',
  'transform': {
    '^.+\\.tsx?$': 'ts-jest',
  },
  'transformIgnorePatterns': [
    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$',
    '^.+\\.module\\.(css|sass|scss)$'
  ],
  'moduleNameMapper': {
    '^@common(.*)$': '<rootDir>/src/common$1',
    '^@api(.*)$': '<rootDir>/src/api$1',
    '^@pc(.*)$': '<rootDir>/src/pc$1',
    '^@m(.*)$': '<rootDir>/src/mobile$1',
    '^@src(.*)$': '<rootDir>/src$1',
    '^react-native$': 'react-native-web',
    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy'
  },
  "unmockedModulePathPatterns": [ "jasmine-expect" ],
  'moduleFileExtensions': [
    'web.js',
    'js',
    'json',
    'web.jsx',
    'jsx',
    'node'
  ]
};

The project is running base on React.

[mxschmitt]

Hm, it seems like Playwright Test starts "Running X test using X worker" and then Jest gets somehow gets trigged (Playwright Test has nothing to do with Jest - we want to prevent that).

Could you run the following command and provide me the output of it?

npx playwright test --list --reporter=json,list

[aslushnikov]

@suedar is this a public project? Can you share a reference so that we debug it locally?

[suedar]

@akshayp7 It is the same.

[suedar]

@mxschmitt First of all, list is an unrecognized option.

Secondly, because the privacy of the project, sorry to tell you that I am not able to provide all the output of the project. Can this output satisfy your need ?

When I input this command npx playwright test --reporter=json,list , I get

 FAIL   browser: chromium  example.test.js
  ● Test suite failed to run

    test() can only be called in a test file

      10 | // 请保证本地运行代码
      11 |
    > 12 | test('my test needs a file', async () => {

and then playwright test is enabled, and then I get the config of the playwright test and this error.

Thanks for ur help.

[suedar]

@aslushnikov I can't do that. Sorry for that....

[mxschmitt]

@akshayp7 It is the same.

This is expected. Its important that you exclude the Playwright Test files from Jest. And vise-versa. The easiest is that you put your e2e tests inside a e2e test directory. And your Jest tests inside another directory.

Only npx playrwight test has the list option e.g. available. Jest and Playwright Test are different test-runners, I will try to come up with a better error message when you invoke Playwright Test code from Jest.

[pavelfeldman]

Ok, looks like we sorted this one out. Thanks @mxschmitt