diff --git a/packages/playwright-test/ThirdPartyNotices.txt b/packages/playwright-test/ThirdPartyNotices.txt index f12634efc3..4860f17c3d 100644 --- a/packages/playwright-test/ThirdPartyNotices.txt +++ b/packages/playwright-test/ThirdPartyNotices.txt @@ -42,99 +42,100 @@ This project incorporates components from the projects listed below. The origina 36. @babel/plugin-syntax-dynamic-import@7.8.3 (https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-dynamic-import) 37. @babel/plugin-syntax-export-namespace-from@7.8.3 (https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-export-namespace-from) 38. @babel/plugin-syntax-json-strings@7.8.3 (https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-json-strings) -39. @babel/plugin-syntax-logical-assignment-operators@7.10.4 (https://github.com/babel/babel) -40. @babel/plugin-syntax-nullish-coalescing-operator@7.8.3 (https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-nullish-coalescing-operator) -41. @babel/plugin-syntax-numeric-separator@7.10.4 (https://github.com/babel/babel) -42. @babel/plugin-syntax-object-rest-spread@7.8.3 (https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-object-rest-spread) -43. @babel/plugin-syntax-optional-catch-binding@7.8.3 (https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-optional-catch-binding) -44. @babel/plugin-syntax-optional-chaining@7.8.3 (https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-optional-chaining) -45. @babel/plugin-syntax-private-property-in-object@7.14.5 (https://github.com/babel/babel) -46. @babel/plugin-syntax-typescript@7.16.7 (https://github.com/babel/babel) -47. @babel/plugin-transform-modules-commonjs@7.17.9 (https://github.com/babel/babel) -48. @babel/plugin-transform-typescript@7.16.8 (https://github.com/babel/babel) -49. @babel/preset-typescript@7.16.7 (https://github.com/babel/babel) -50. @babel/template@7.16.7 (https://github.com/babel/babel) -51. @babel/traverse@7.17.9 (https://github.com/babel/babel) -52. @babel/types@7.17.0 (https://github.com/babel/babel) -53. @jridgewell/resolve-uri@3.0.5 (https://github.com/jridgewell/resolve-uri) -54. @jridgewell/sourcemap-codec@1.4.11 (https://github.com/jridgewell/sourcemap-codec) -55. @jridgewell/trace-mapping@0.3.6 (https://github.com/jridgewell/trace-mapping) -56. ansi-styles@3.2.1 (https://github.com/chalk/ansi-styles) -57. babel-plugin-dynamic-import-node@2.3.3 (https://github.com/airbnb/babel-plugin-dynamic-import-node) -58. browserslist@4.20.2 (https://github.com/browserslist/browserslist) -59. call-bind@1.0.2 (https://github.com/ljharb/call-bind) -60. caniuse-lite@1.0.30001332 (https://github.com/browserslist/caniuse-lite) -61. chalk@2.4.2 (https://github.com/chalk/chalk) -62. color-convert@1.9.3 (https://github.com/Qix-/color-convert) -63. color-name@1.1.3 (https://github.com/dfcreative/color-name) -64. convert-source-map@1.8.0 (https://github.com/thlorenz/convert-source-map) -65. debug@4.3.4 (https://github.com/debug-js/debug) -66. define-properties@1.1.4 (https://github.com/ljharb/define-properties) -67. electron-to-chromium@1.4.114 (https://github.com/kilian/electron-to-chromium) -68. escalade@3.1.1 (https://github.com/lukeed/escalade) -69. escape-string-regexp@1.0.5 (https://github.com/sindresorhus/escape-string-regexp) -70. function-bind@1.1.1 (https://github.com/Raynos/function-bind) -71. gensync@1.0.0-beta.2 (https://github.com/loganfsmyth/gensync) -72. get-intrinsic@1.1.1 (https://github.com/ljharb/get-intrinsic) -73. globals@11.12.0 (https://github.com/sindresorhus/globals) -74. has-flag@3.0.0 (https://github.com/sindresorhus/has-flag) -75. has-property-descriptors@1.0.0 (https://github.com/inspect-js/has-property-descriptors) -76. has-symbols@1.0.3 (https://github.com/inspect-js/has-symbols) -77. has@1.0.3 (https://github.com/tarruda/has) -78. js-tokens@4.0.0 (https://github.com/lydell/js-tokens) -79. jsesc@2.5.2 (https://github.com/mathiasbynens/jsesc) -80. json5@2.2.1 (https://github.com/json5/json5) -81. ms@2.1.2 (https://github.com/zeit/ms) -82. node-releases@2.0.3 (https://github.com/chicoxyzzy/node-releases) -83. object-keys@1.1.1 (https://github.com/ljharb/object-keys) -84. object.assign@4.1.2 (https://github.com/ljharb/object.assign) -85. picocolors@1.0.0 (https://github.com/alexeyraspopov/picocolors) -86. safe-buffer@5.1.2 (https://github.com/feross/safe-buffer) -87. semver@6.3.0 (https://github.com/npm/node-semver) -88. source-map@0.5.7 (https://github.com/mozilla/source-map) -89. supports-color@5.5.0 (https://github.com/chalk/supports-color) -90. to-fast-properties@2.0.0 (https://github.com/sindresorhus/to-fast-properties) -91. @jest/types@27.5.1 (https://github.com/facebook/jest) -92. @types/istanbul-lib-coverage@2.0.4 (https://github.com/DefinitelyTyped/DefinitelyTyped) -93. @types/istanbul-lib-report@3.0.0 (https://github.com/DefinitelyTyped/DefinitelyTyped) -94. @types/istanbul-reports@3.0.1 (https://github.com/DefinitelyTyped/DefinitelyTyped) -95. @types/node@17.0.24 (https://github.com/DefinitelyTyped/DefinitelyTyped) -96. @types/stack-utils@2.0.1 (https://github.com/DefinitelyTyped/DefinitelyTyped) -97. @types/yargs-parser@21.0.0 (https://github.com/DefinitelyTyped/DefinitelyTyped) -98. @types/yargs@16.0.4 (https://github.com/DefinitelyTyped/DefinitelyTyped) -99. ansi-regex@5.0.1 (https://github.com/chalk/ansi-regex) -100. ansi-styles@4.3.0 (https://github.com/chalk/ansi-styles) -101. ansi-styles@5.2.0 (https://github.com/chalk/ansi-styles) -102. braces@3.0.2 (https://github.com/micromatch/braces) -103. chalk@4.1.2 (https://github.com/chalk/chalk) -104. color-convert@2.0.1 (https://github.com/Qix-/color-convert) -105. color-name@1.1.4 (https://github.com/colorjs/color-name) -106. diff-sequences@27.5.1 (https://github.com/facebook/jest) -107. escape-string-regexp@2.0.0 (https://github.com/sindresorhus/escape-string-regexp) -108. expect@27.2.5 (https://github.com/facebook/jest) -109. fill-range@7.0.1 (https://github.com/jonschlinkert/fill-range) -110. graceful-fs@4.2.10 (https://github.com/isaacs/node-graceful-fs) -111. has-flag@4.0.0 (https://github.com/sindresorhus/has-flag) -112. is-number@7.0.0 (https://github.com/jonschlinkert/is-number) -113. jest-diff@27.5.1 (https://github.com/facebook/jest) -114. jest-get-type@27.5.1 (https://github.com/facebook/jest) -115. jest-matcher-utils@27.2.5 (https://github.com/facebook/jest) -116. jest-message-util@27.5.1 (https://github.com/facebook/jest) -117. jest-regex-util@27.5.1 (https://github.com/facebook/jest) -118. micromatch@4.0.5 (https://github.com/micromatch/micromatch) -119. picomatch@2.3.1 (https://github.com/micromatch/picomatch) -120. pretty-format@27.5.1 (https://github.com/facebook/jest) -121. react-is@17.0.2 (https://github.com/facebook/react) -122. slash@3.0.0 (https://github.com/sindresorhus/slash) -123. stack-utils@2.0.5 (https://github.com/tapjs/stack-utils) -124. supports-color@7.2.0 (https://github.com/chalk/supports-color) -125. to-regex-range@5.0.1 (https://github.com/micromatch/to-regex-range) -126. define-lazy-prop@2.0.0 (https://github.com/sindresorhus/define-lazy-prop) -127. is-docker@2.2.1 (https://github.com/sindresorhus/is-docker) -128. is-wsl@2.2.0 (https://github.com/sindresorhus/is-wsl) -129. open@8.4.0 (https://github.com/sindresorhus/open) -130. pirates@4.0.4 (https://github.com/danez/pirates) -131. source-map-support@0.4.18 (https://github.com/evanw/node-source-map-support) +39. @babel/plugin-syntax-jsx@7.16.7 (https://github.com/babel/babel) +40. @babel/plugin-syntax-logical-assignment-operators@7.10.4 (https://github.com/babel/babel) +41. @babel/plugin-syntax-nullish-coalescing-operator@7.8.3 (https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-nullish-coalescing-operator) +42. @babel/plugin-syntax-numeric-separator@7.10.4 (https://github.com/babel/babel) +43. @babel/plugin-syntax-object-rest-spread@7.8.3 (https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-object-rest-spread) +44. @babel/plugin-syntax-optional-catch-binding@7.8.3 (https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-optional-catch-binding) +45. @babel/plugin-syntax-optional-chaining@7.8.3 (https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-optional-chaining) +46. @babel/plugin-syntax-private-property-in-object@7.14.5 (https://github.com/babel/babel) +47. @babel/plugin-syntax-typescript@7.16.7 (https://github.com/babel/babel) +48. @babel/plugin-transform-modules-commonjs@7.17.9 (https://github.com/babel/babel) +49. @babel/plugin-transform-typescript@7.16.8 (https://github.com/babel/babel) +50. @babel/preset-typescript@7.16.7 (https://github.com/babel/babel) +51. @babel/template@7.16.7 (https://github.com/babel/babel) +52. @babel/traverse@7.17.9 (https://github.com/babel/babel) +53. @babel/types@7.17.0 (https://github.com/babel/babel) +54. @jridgewell/resolve-uri@3.0.5 (https://github.com/jridgewell/resolve-uri) +55. @jridgewell/sourcemap-codec@1.4.11 (https://github.com/jridgewell/sourcemap-codec) +56. @jridgewell/trace-mapping@0.3.6 (https://github.com/jridgewell/trace-mapping) +57. ansi-styles@3.2.1 (https://github.com/chalk/ansi-styles) +58. babel-plugin-dynamic-import-node@2.3.3 (https://github.com/airbnb/babel-plugin-dynamic-import-node) +59. browserslist@4.20.2 (https://github.com/browserslist/browserslist) +60. call-bind@1.0.2 (https://github.com/ljharb/call-bind) +61. caniuse-lite@1.0.30001332 (https://github.com/browserslist/caniuse-lite) +62. chalk@2.4.2 (https://github.com/chalk/chalk) +63. color-convert@1.9.3 (https://github.com/Qix-/color-convert) +64. color-name@1.1.3 (https://github.com/dfcreative/color-name) +65. convert-source-map@1.8.0 (https://github.com/thlorenz/convert-source-map) +66. debug@4.3.4 (https://github.com/debug-js/debug) +67. define-properties@1.1.4 (https://github.com/ljharb/define-properties) +68. electron-to-chromium@1.4.114 (https://github.com/kilian/electron-to-chromium) +69. escalade@3.1.1 (https://github.com/lukeed/escalade) +70. escape-string-regexp@1.0.5 (https://github.com/sindresorhus/escape-string-regexp) +71. function-bind@1.1.1 (https://github.com/Raynos/function-bind) +72. gensync@1.0.0-beta.2 (https://github.com/loganfsmyth/gensync) +73. get-intrinsic@1.1.1 (https://github.com/ljharb/get-intrinsic) +74. globals@11.12.0 (https://github.com/sindresorhus/globals) +75. has-flag@3.0.0 (https://github.com/sindresorhus/has-flag) +76. has-property-descriptors@1.0.0 (https://github.com/inspect-js/has-property-descriptors) +77. has-symbols@1.0.3 (https://github.com/inspect-js/has-symbols) +78. has@1.0.3 (https://github.com/tarruda/has) +79. js-tokens@4.0.0 (https://github.com/lydell/js-tokens) +80. jsesc@2.5.2 (https://github.com/mathiasbynens/jsesc) +81. json5@2.2.1 (https://github.com/json5/json5) +82. ms@2.1.2 (https://github.com/zeit/ms) +83. node-releases@2.0.3 (https://github.com/chicoxyzzy/node-releases) +84. object-keys@1.1.1 (https://github.com/ljharb/object-keys) +85. object.assign@4.1.2 (https://github.com/ljharb/object.assign) +86. picocolors@1.0.0 (https://github.com/alexeyraspopov/picocolors) +87. safe-buffer@5.1.2 (https://github.com/feross/safe-buffer) +88. semver@6.3.0 (https://github.com/npm/node-semver) +89. source-map@0.5.7 (https://github.com/mozilla/source-map) +90. supports-color@5.5.0 (https://github.com/chalk/supports-color) +91. to-fast-properties@2.0.0 (https://github.com/sindresorhus/to-fast-properties) +92. @jest/types@27.5.1 (https://github.com/facebook/jest) +93. @types/istanbul-lib-coverage@2.0.4 (https://github.com/DefinitelyTyped/DefinitelyTyped) +94. @types/istanbul-lib-report@3.0.0 (https://github.com/DefinitelyTyped/DefinitelyTyped) +95. @types/istanbul-reports@3.0.1 (https://github.com/DefinitelyTyped/DefinitelyTyped) +96. @types/node@17.0.24 (https://github.com/DefinitelyTyped/DefinitelyTyped) +97. @types/stack-utils@2.0.1 (https://github.com/DefinitelyTyped/DefinitelyTyped) +98. @types/yargs-parser@21.0.0 (https://github.com/DefinitelyTyped/DefinitelyTyped) +99. @types/yargs@16.0.4 (https://github.com/DefinitelyTyped/DefinitelyTyped) +100. ansi-regex@5.0.1 (https://github.com/chalk/ansi-regex) +101. ansi-styles@4.3.0 (https://github.com/chalk/ansi-styles) +102. ansi-styles@5.2.0 (https://github.com/chalk/ansi-styles) +103. braces@3.0.2 (https://github.com/micromatch/braces) +104. chalk@4.1.2 (https://github.com/chalk/chalk) +105. color-convert@2.0.1 (https://github.com/Qix-/color-convert) +106. color-name@1.1.4 (https://github.com/colorjs/color-name) +107. diff-sequences@27.5.1 (https://github.com/facebook/jest) +108. escape-string-regexp@2.0.0 (https://github.com/sindresorhus/escape-string-regexp) +109. expect@27.2.5 (https://github.com/facebook/jest) +110. fill-range@7.0.1 (https://github.com/jonschlinkert/fill-range) +111. graceful-fs@4.2.10 (https://github.com/isaacs/node-graceful-fs) +112. has-flag@4.0.0 (https://github.com/sindresorhus/has-flag) +113. is-number@7.0.0 (https://github.com/jonschlinkert/is-number) +114. jest-diff@27.5.1 (https://github.com/facebook/jest) +115. jest-get-type@27.5.1 (https://github.com/facebook/jest) +116. jest-matcher-utils@27.2.5 (https://github.com/facebook/jest) +117. jest-message-util@27.5.1 (https://github.com/facebook/jest) +118. jest-regex-util@27.5.1 (https://github.com/facebook/jest) +119. micromatch@4.0.5 (https://github.com/micromatch/micromatch) +120. picomatch@2.3.1 (https://github.com/micromatch/picomatch) +121. pretty-format@27.5.1 (https://github.com/facebook/jest) +122. react-is@17.0.2 (https://github.com/facebook/react) +123. slash@3.0.0 (https://github.com/sindresorhus/slash) +124. stack-utils@2.0.5 (https://github.com/tapjs/stack-utils) +125. supports-color@7.2.0 (https://github.com/chalk/supports-color) +126. to-regex-range@5.0.1 (https://github.com/micromatch/to-regex-range) +127. define-lazy-prop@2.0.0 (https://github.com/sindresorhus/define-lazy-prop) +128. is-docker@2.2.1 (https://github.com/sindresorhus/is-docker) +129. is-wsl@2.2.0 (https://github.com/sindresorhus/is-wsl) +130. open@8.4.0 (https://github.com/sindresorhus/open) +131. pirates@4.0.4 (https://github.com/danez/pirates) +132. source-map-support@0.4.18 (https://github.com/evanw/node-source-map-support) %% @ampproject/remapping@2.1.2 NOTICES AND INFORMATION BEGIN HERE ========================================= @@ -1338,6 +1339,33 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ========================================= END OF @babel/plugin-syntax-json-strings@7.8.3 AND INFORMATION +%% @babel/plugin-syntax-jsx@7.16.7 NOTICES AND INFORMATION BEGIN HERE +========================================= +MIT License + +Copyright (c) 2014-present Sebastian McKenzie and other contributors + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +========================================= +END OF @babel/plugin-syntax-jsx@7.16.7 AND INFORMATION + %% @babel/plugin-syntax-logical-assignment-operators@7.10.4 NOTICES AND INFORMATION BEGIN HERE ========================================= MIT License diff --git a/packages/playwright-test/bundles/babel/package-lock.json b/packages/playwright-test/bundles/babel/package-lock.json index 1e9d080d16..3cbe8e1144 100644 --- a/packages/playwright-test/bundles/babel/package-lock.json +++ b/packages/playwright-test/bundles/babel/package-lock.json @@ -23,6 +23,7 @@ "@babel/plugin-proposal-private-property-in-object": "^7.16.7", "@babel/plugin-syntax-async-generators": "^7.8.4", "@babel/plugin-syntax-json-strings": "^7.8.3", + "@babel/plugin-syntax-jsx": "^7.16.7", "@babel/plugin-syntax-object-rest-spread": "^7.8.3", "@babel/plugin-syntax-optional-catch-binding": "^7.8.3", "@babel/plugin-transform-modules-commonjs": "^7.16.8", @@ -531,6 +532,20 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-syntax-jsx": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz", + "integrity": "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==", + "dependencies": { + "@babel/helper-plugin-utils": "^7.16.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-syntax-logical-assignment-operators": { "version": "7.10.4", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz", @@ -1484,6 +1499,14 @@ "@babel/helper-plugin-utils": "^7.8.0" } }, + "@babel/plugin-syntax-jsx": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz", + "integrity": "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==", + "requires": { + "@babel/helper-plugin-utils": "^7.16.7" + } + }, "@babel/plugin-syntax-logical-assignment-operators": { "version": "7.10.4", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz", diff --git a/packages/playwright-test/bundles/babel/package.json b/packages/playwright-test/bundles/babel/package.json index 840ee2aef2..d9a56cdade 100644 --- a/packages/playwright-test/bundles/babel/package.json +++ b/packages/playwright-test/bundles/babel/package.json @@ -24,6 +24,7 @@ "@babel/plugin-proposal-private-property-in-object": "^7.16.7", "@babel/plugin-syntax-async-generators": "^7.8.4", "@babel/plugin-syntax-json-strings": "^7.8.3", + "@babel/plugin-syntax-jsx": "^7.16.7", "@babel/plugin-syntax-object-rest-spread": "^7.8.3", "@babel/plugin-syntax-optional-catch-binding": "^7.8.3", "@babel/plugin-transform-modules-commonjs": "^7.16.8", diff --git a/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts b/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts index b53a8dfb61..13c0059afb 100644 --- a/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts +++ b/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts @@ -41,11 +41,13 @@ export function babelTransform(filename: string, isTypeScript: boolean, isModule [require('@babel/plugin-syntax-object-rest-spread')], [require('@babel/plugin-proposal-export-namespace-from')] ); + } else { + plugins.push([require('@babel/plugin-syntax-jsx')]); + } - if (!isModule) { - plugins.push([require('@babel/plugin-transform-modules-commonjs')]); - plugins.push([require('@babel/plugin-proposal-dynamic-import')]); - } + if (!isModule) { + plugins.push([require('@babel/plugin-transform-modules-commonjs')]); + plugins.push([require('@babel/plugin-proposal-dynamic-import')]); } plugins.unshift(additionalPlugin); diff --git a/packages/playwright-test/src/loader.ts b/packages/playwright-test/src/loader.ts index aa3820057c..13f662259e 100644 --- a/packages/playwright-test/src/loader.ts +++ b/packages/playwright-test/src/loader.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { installTransform, setCurrentlyLoadingTestFile } from './transform'; +import { installTransform } from './transform'; import type { Config, Project, ReporterDescription, FullProjectInternal, FullConfigInternal, Fixtures, FixturesWithLocation } from './types'; import { getPackageJsonPath, mergeObjects, errorWithFile } from './util'; import { setCurrentlyLoadingFileSuite } from './globals'; @@ -153,7 +153,6 @@ export class Loader { suite._requireFile = file; suite.location = { file, line: 0, column: 0 }; - setCurrentlyLoadingTestFile(file); setCurrentlyLoadingFileSuite(suite); try { await this._requireOrImport(file); @@ -163,7 +162,6 @@ export class Loader { throw e; suite._loadError = serializeError(e); } finally { - setCurrentlyLoadingTestFile(null); setCurrentlyLoadingFileSuite(undefined); } diff --git a/packages/playwright-test/src/plugins/vitePlugin.ts b/packages/playwright-test/src/plugins/vitePlugin.ts index 61c60d606c..0782f3e405 100644 --- a/packages/playwright-test/src/plugins/vitePlugin.ts +++ b/packages/playwright-test/src/plugins/vitePlugin.ts @@ -80,10 +80,27 @@ export function createPlugin( const sourcesDirty = !buildExists || hasNewComponents || await checkSources(buildInfo); viteConfig.root = rootDir; + viteConfig.publicDir = false; viteConfig.preview = { port }; viteConfig.build = { outDir }; + + // React heuristic. If we see a component in a file with .js extension, + // consider it a potential JSX-in-JS scenario and enable JSX loader for all + // .js files. + if (hasJSComponents(buildInfo.components)) { + viteConfig.esbuild = { + loader: 'jsx', + include: /.*\.jsx?$/, + exclude: [], + }; + viteConfig.optimizeDeps = { + esbuildOptions: { + loader: { '.js': 'jsx' }, + } + }; + } const { build, preview } = require('vite'); if (sourcesDirty) { viteConfig.plugins = viteConfig.plugins || [ @@ -250,6 +267,12 @@ function vitePlugin(registerSource: string, relativeTemplateDir: string, buildIn } } + // Vite React plugin will do this for .jsx files, but not .js files. + if (id.endsWith('.js') && content.includes('React.createElement') && !content.includes('import React')) { + const code = `import React from 'react';\n${content}`; + return { code, map: { mappings: '' } }; + } + if (!id.endsWith(`${relativeTemplateDir}/index.ts`) && !id.endsWith(`${relativeTemplateDir}/index.tsx`) && !id.endsWith(`${relativeTemplateDir}/index.js`)) return; @@ -273,3 +296,12 @@ function vitePlugin(registerSource: string, relativeTemplateDir: string, buildIn }, }; } + +function hasJSComponents(components: ComponentInfo[]): boolean { + for (const component of components) { + const extname = path.extname(component.importPath); + if (extname === '.js' || !extname && fs.existsSync(component.importPath + '.js')) + return true; + } + return false; +} diff --git a/packages/playwright-test/src/transform.ts b/packages/playwright-test/src/transform.ts index 3a472a7812..a6e4ffe5c6 100644 --- a/packages/playwright-test/src/transform.ts +++ b/packages/playwright-test/src/transform.ts @@ -26,7 +26,7 @@ import { tsConfigLoader } from './third_party/tsconfig-loader'; import Module from 'module'; import type { BabelTransformFunction } from './babelBundle'; -const version = 9; +const version = 10; const cacheDir = process.env.PWTEST_CACHE_DIR || path.join(os.tmpdir(), 'playwright-transform-cache'); const sourceMaps: Map = new Map(); @@ -159,17 +159,15 @@ export function resolveHook(filename: string, specifier: string): string | undef } export function transformHook(code: string, filename: string, isModule = false): string { - if (isComponentImport(filename)) - return componentStub(); - // If we are not TypeScript and there is no applicable preprocessor - bail out. const isTypeScript = filename.endsWith('.ts') || filename.endsWith('.tsx'); + const isJSX = filename.endsWith('.jsx'); const hasPreprocessor = process.env.PW_TEST_SOURCE_TRANSFORM && process.env.PW_TEST_SOURCE_TRANSFORM_SCOPE && process.env.PW_TEST_SOURCE_TRANSFORM_SCOPE.split(pathSeparator).some(f => filename.startsWith(f)); - if (!isTypeScript && !hasPreprocessor) + if (!isTypeScript && !isJSX && !hasPreprocessor) return code; const cachePath = calculateCachePath(code, filename, isModule); @@ -213,7 +211,7 @@ export function installTransform(): () => void { } (Module as any)._resolveFilename = resolveFilename; - const exts = ['.ts', '.tsx']; + const exts = ['.ts', '.tsx', '.jsx']; // When script preprocessor is engaged, we transpile JS as well. if (scriptPreprocessor) exts.push('.js', '.mjs'); @@ -249,22 +247,3 @@ export function wrapFunctionWithLocation(func: (location: Lo return func(location, ...args); }; } - - -let currentlyLoadingTestFile: string | null = null; - -export function setCurrentlyLoadingTestFile(file: string | null) { - currentlyLoadingTestFile = file; -} - -function isComponentImport(filename: string): boolean { - if (filename === currentlyLoadingTestFile) - return false; - return filename.endsWith('.tsx') || filename.endsWith('.jsx'); -} - -function componentStub(): string { - return `module.exports = new Proxy({}, { - get: (obj, prop) => prop - });`; -} diff --git a/tests/playwright-test/babel.spec.ts b/tests/playwright-test/babel.spec.ts index 0e2c8a47d9..7eae2e1bb6 100644 --- a/tests/playwright-test/babel.spec.ts +++ b/tests/playwright-test/babel.spec.ts @@ -38,8 +38,6 @@ test('should succeed', async ({ runInlineTest }) => { }); test('should treat enums equally', async ({ runInlineTest }) => { - test.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/13265' }); - test.fail(); const result = await runInlineTest({ 'component.tsx': ` export enum MyEnum { diff --git a/tests/playwright-test/playwright.ct-build.spec.ts b/tests/playwright-test/playwright.ct-build.spec.ts index 7c78201722..fd465308b9 100644 --- a/tests/playwright-test/playwright.ct-build.spec.ts +++ b/tests/playwright-test/playwright.ct-build.spec.ts @@ -16,7 +16,6 @@ import { test, expect, stripAnsi } from './playwright-test-fixtures'; import fs from 'fs'; -import path from 'path'; test.describe.configure({ mode: 'parallel' }); @@ -35,7 +34,7 @@ test('should work with the empty component list', async ({ runInlineTest }, test expect(result.passed).toBe(1); const output = stripAnsi(result.output); expect(output).toContain('transforming...'); - expect(output).toContain(path.join('playwright', '.cache', 'playwright', 'index.html')); + expect(output.replace(/\\+/g, '/')).toContain('playwright/.cache/playwright/index.html'); const metainfo = JSON.parse(fs.readFileSync(testInfo.outputPath('playwright/.cache/metainfo.json'), 'utf-8')); expect(metainfo.version).toEqual(expect.any(Number)); diff --git a/tests/playwright-test/playwright.ct-react.spec.ts b/tests/playwright-test/playwright.ct-react.spec.ts index 6523e3a293..5b16f91cb5 100644 --- a/tests/playwright-test/playwright.ct-react.spec.ts +++ b/tests/playwright-test/playwright.ct-react.spec.ts @@ -16,11 +16,14 @@ import { test, expect } from './playwright-test-fixtures'; -test('should work with TSX', async ({ runInlineTest }, testInfo) => { +test('should work with TSX', async ({ runInlineTest }) => { const result = await runInlineTest({ 'playwright/index.html': ``, - 'playwright/index.ts': ``, + 'playwright/index.ts': ` + //@no-header + `, 'src/button.tsx': ` + //@no-header export const Button = () => ; `, @@ -40,12 +43,15 @@ test('should work with TSX', async ({ runInlineTest }, testInfo) => { expect(result.passed).toBe(1); }); -test.fixme('should work with JSX', async ({ runInlineTest }, testInfo) => { +test('should work with JSX', async ({ runInlineTest }) => { const result = await runInlineTest({ 'playwright/index.html': ``, - 'playwright/index.js': ``, + 'playwright/index.js': ` + //@no-header + `, 'src/button.jsx': ` + //@no-header export const Button = () => ; `, @@ -65,12 +71,15 @@ test.fixme('should work with JSX', async ({ runInlineTest }, testInfo) => { expect(result.passed).toBe(1); }); -test.fixme('should work with JS in JSX', async ({ runInlineTest }, testInfo) => { +test('should work with JSX in JS', async ({ runInlineTest }) => { const result = await runInlineTest({ 'playwright/index.html': ``, - 'playwright/index.js': ``, + 'playwright/index.js': ` + //@no-header + `, 'src/button.js': ` + //@no-header export const Button = () => ; `, @@ -89,3 +98,145 @@ test.fixme('should work with JS in JSX', async ({ runInlineTest }, testInfo) => expect(result.exitCode).toBe(0); expect(result.passed).toBe(1); }); + +test('should work with JSX in JS and in JSX', async ({ runInlineTest }) => { + const result = await runInlineTest({ + 'playwright/index.html': ``, + 'playwright/index.js': ` + //@no-header + `, + + 'src/button.js': ` + //@no-header + export const Button = () => ; + `, + + 'src/list.jsx': ` + //@no-header + export const List = () => ; + `, + + 'src/button.test.jsx': ` + //@no-header + import { test, expect } from '@playwright/experimental-ct-react'; + import { Button } from './button'; + import { List } from './list'; + + test('pass button', async ({ mount }) => { + const component = await mount(); + await expect(component).toHaveText('Button'); + }); + + test('pass list', async ({ mount }) => { + const component = await mount(); + await expect(component).toHaveText('List'); + }); + `, + }, { workers: 1 }); + + expect(result.exitCode).toBe(0); + expect(result.passed).toBe(2); +}); + + +test('should work with stray TSX import', async ({ runInlineTest }) => { + const result = await runInlineTest({ + 'playwright/index.html': ``, + 'playwright/index.ts': ` + //@no-header + `, + + 'src/button.tsx': ` + //@no-header + export const Button = () => ; + `, + + 'src/list.tsx': ` + //@no-header + export const List = () => ; + `, + + 'src/button.test.tsx': ` + //@no-header + import { test, expect } from '@playwright/experimental-ct-react'; + import { Button } from './button'; + import { List } from './list'; + + test('pass button', async ({ mount }) => { + const component = await mount(); + await expect(component).toHaveText('Button'); + }); + `, + }, { workers: 1 }); + + expect(result.exitCode).toBe(0); + expect(result.passed).toBe(1); +}); + +test('should work with stray JSX import', async ({ runInlineTest }) => { + const result = await runInlineTest({ + 'playwright/index.html': ``, + 'playwright/index.js': ` + //@no-header + `, + + 'src/button.jsx': ` + //@no-header + export const Button = () => ; + `, + + 'src/list.jsx': ` + //@no-header + export const List = () => ; + `, + + 'src/button.test.jsx': ` + //@no-header + import { test, expect } from '@playwright/experimental-ct-react'; + import { Button } from './button'; + import { List } from './list'; + + test('pass button', async ({ mount }) => { + const component = await mount(); + await expect(component).toHaveText('Button'); + }); + `, + }, { workers: 1 }); + + expect(result.exitCode).toBe(0); + expect(result.passed).toBe(1); +}); + +test.fixme('should work with stray JS import', async ({ runInlineTest }) => { + const result = await runInlineTest({ + 'playwright/index.html': ``, + 'playwright/index.js': ` + //@no-header + `, + + 'src/button.js': ` + //@no-header + export const Button = () => ; + `, + + 'src/list.js': ` + //@no-header + export const List = () => ; + `, + + 'src/button.test.jsx': ` + //@no-header + import { test, expect } from '@playwright/experimental-ct-react'; + import { Button } from './button'; + import { List } from './list'; + + test('pass button', async ({ mount }) => { + const component = await mount(); + await expect(component).toHaveText('Button'); + }); + `, + }, { workers: 1 }); + + expect(result.exitCode).toBe(0); + expect(result.passed).toBe(1); +});