feat(ct): support cra w/ .js (#14326)

This commit is contained in:
Pavel Feldman 2022-05-24 19:43:28 -07:00 committed by GitHub
parent 2fab2c1ca1
commit 9440f52b88
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 346 additions and 135 deletions

View file

@ -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

View file

@ -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",

View file

@ -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",

View file

@ -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);

View file

@ -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);
}

View file

@ -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;
}

View file

@ -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<string, string> = 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<A extends any[], R>(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
});`;
}

View file

@ -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 {

View file

@ -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));

View file

@ -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': `<script type="module" src="/playwright/index.ts"></script>`,
'playwright/index.ts': ``,
'playwright/index.ts': `
//@no-header
`,
'src/button.tsx': `
//@no-header
export const Button = () => <button>Button</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': `<script type="module" src="/playwright/index.js"></script>`,
'playwright/index.js': ``,
'playwright/index.js': `
//@no-header
`,
'src/button.jsx': `
//@no-header
export const Button = () => <button>Button</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': `<script type="module" src="/playwright/index.js"></script>`,
'playwright/index.js': ``,
'playwright/index.js': `
//@no-header
`,
'src/button.js': `
//@no-header
export const Button = () => <button>Button</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': `<script type="module" src="/playwright/index.js"></script>`,
'playwright/index.js': `
//@no-header
`,
'src/button.js': `
//@no-header
export const Button = () => <button>Button</button>;
`,
'src/list.jsx': `
//@no-header
export const List = () => <ul><li>List</li></ul>;
`,
'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(<Button></Button>);
await expect(component).toHaveText('Button');
});
test('pass list', async ({ mount }) => {
const component = await mount(<List></List>);
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': `<script type="module" src="/playwright/index.ts"></script>`,
'playwright/index.ts': `
//@no-header
`,
'src/button.tsx': `
//@no-header
export const Button = () => <button>Button</button>;
`,
'src/list.tsx': `
//@no-header
export const List = () => <ul><li>List</li></ul>;
`,
'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(<Button></Button>);
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': `<script type="module" src="/playwright/index.js"></script>`,
'playwright/index.js': `
//@no-header
`,
'src/button.jsx': `
//@no-header
export const Button = () => <button>Button</button>;
`,
'src/list.jsx': `
//@no-header
export const List = () => <ul><li>List</li></ul>;
`,
'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(<Button></Button>);
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': `<script type="module" src="/playwright/index.js"></script>`,
'playwright/index.js': `
//@no-header
`,
'src/button.js': `
//@no-header
export const Button = () => <button>Button</button>;
`,
'src/list.js': `
//@no-header
export const List = () => <ul><li>List</li></ul>;
`,
'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(<Button></Button>);
await expect(component).toHaveText('Button');
});
`,
}, { workers: 1 });
expect(result.exitCode).toBe(0);
expect(result.passed).toBe(1);
});