feat: ability to read tests in ".jsx" and ".tsx" files #851

DudaGod · 2024-02-29T12:21:27Z

What is done

Added ability to read tests in .jsx and .tsx files. To do this, it was necessary to add a code transpiler - babel. Used in order to convert components like <h1>foo</h1> to code which can be required.

In this PR supports only commonjs because esm projects not working with Hermione at the moment.

DudaGod · 2024-02-29T12:22:07Z

README.md

@@ -1619,8 +1619,6 @@ Using `-r` or `--require` option you can load external modules, which exists in
 - compilers such as TypeScript via [ts-node](https://www.npmjs.com/package/ts-node) (using `--require ts-node/register`) or Babel via [@babel/register](https://www.npmjs.com/package/@babel/register) (using `--require @babel/register`);
 - loaders such as ECMAScript modules via [esm](https://www.npmjs.com/package/esm).

-Be sure to update [fileExtensions](#fileExtensions) apropriately, if you are planning to import anything other than `.js`.


deleted because it doesn't make sense anymore

DudaGod · 2024-02-29T12:25:23Z

package.json

+    "@babel/core": "7.24.0",
+    "@babel/plugin-transform-modules-commonjs": "7.23.3",
+    "@babel/plugin-transform-react-jsx": "7.23.4",
+    "@babel/preset-react": "7.23.3",


used in order to correctly transpile jsx and tsx to code which can be required

DudaGod · 2024-02-29T12:27:07Z

package.json

@@ -66,6 +70,7 @@
    "looks-same": "9.0.0",
    "micromatch": "4.0.5",
    "mocha": "10.2.0",
+    "pirates": "4.0.6",


used in order to add hook which can modify default require in order to traspile code in runtime

DudaGod · 2024-02-29T12:29:25Z

src/test-reader/test-transformer.ts

+        browserslistConfigFile: false,
+        babelrc: false,
+        configFile: false,
+        compact: false,


in order not to make unnecessary code inside babel

DudaGod · 2024-02-29T12:29:56Z

src/test-reader/test-transformer.ts

+        compact: false,
+        plugins: [
+            [
+                require("@babel/plugin-transform-react-jsx"),


transform components to readable code by require or import

DudaGod · 2024-02-29T12:30:38Z

src/test-reader/test-transformer.ts

+                require("@babel/plugin-transform-react-jsx"),
+                {
+                    throwIfNamespace: false,
+                    runtime: "automatic",


adds import for react even if it doesn't specified in file with component

DudaGod · 2024-02-29T12:31:19Z

src/test-reader/test-transformer.ts

+            [
+                require("@babel/plugin-transform-react-jsx"),
+                {
+                    throwIfNamespace: false,


https://babeljs.io/docs/babel-preset-react#throwifnamespace

DudaGod · 2024-02-29T12:31:33Z

src/test-reader/test-transformer.ts

+                    runtime: "automatic",
+                },
+            ],
+            require("@babel/plugin-transform-modules-commonjs"),


in order to modify imports to requires

DudaGod · 2024-02-29T12:33:00Z

src/test-reader/test-transformer.ts

+                    visitor: {
+                        ImportDeclaration(path: NodePath<ImportDeclaration>): void {
+                            if (path.node.source.value.match(/\.(css|less|scss)$/)) {
+                                path.remove();


In order to remove css imports. I don't find solution how to transpile them, so I remove them because we need only read tests and not execute in nodejs (will be executed in browser in next PR)

DudaGod · 2024-03-19T16:52:03Z

package.json

@@ -8,7 +8,8 @@
    "typings"
  ],
  "scripts": {
-    "build": "tsc && npm run copy-static",
+    "build": "tsc && npm run copy-static && npm run build-bundle -- --minify",
+    "build-bundle": "esbuild ./src/bundle/index.ts --outdir=./build/src/bundle --bundle --format=cjs --platform=node --target=ES2021",


Here I build a bundle in order to not install all heavy babel deps in dependencies

I think we should add it to the watch script as well.

In watch script, we can either build the bundle once on startup, or make 2 separate scripts like watch:bundle watch:src and unite them in watch script via concurrently (we use the same approach in html-reporter).

I'm not sure how often we'll want to change (watch) bundle contents, so it's up to you to decide.

I think about it, but it seemed to me that this file would rarely change. Anyway I add it to watch script.

DudaGod · 2024-03-19T16:53:04Z

package.json

@@ -107,6 +115,7 @@
    "jsdom": "^24.0.0",
    "jsdom-global": "3.0.2",
    "onchange": "7.1.0",
+    "pirates": "4.0.6",


all deps installed in dev deps and used only through bundle

DudaGod · 2024-03-19T16:56:32Z

src/bundle/constants.ts

@@ -0,0 +1,2 @@
+export const TRANSFORM_EXTENSIONS = [".jsx", ".cjsx", ".mjsx", ".tsx", ".ctsx", ".mtsx"];


extensions which should be transformed. I took various types of dependencies in which components can be described from this site - https://www.totaltypescript.com/concepts/mjs-cjs-mts-and-cts-extensions.

DudaGod · 2024-03-19T16:58:35Z

src/bundle/constants.ts

@@ -0,0 +1,2 @@
+export const TRANSFORM_EXTENSIONS = [".jsx", ".cjsx", ".mjsx", ".tsx", ".ctsx", ".mtsx"];
+export const JS_EXTENSION_RE = /^\.([cm]?[tj]sx?|json)$/;


used in order to transform only javascript files and json. Omit all other extensions like .png, .woff, .css and etc.

DudaGod · 2024-03-19T16:59:05Z

src/bundle/test-transformer.ts

+                            const extname = nodePath.extname(path.node.source.value);
+
+                            if (extname && !extname.match(JS_EXTENSION_RE)) {
+                                path.remove();


Here omit imports like .css and others which can be transformed

DudaGod · 2024-03-19T17:00:03Z

tsconfig.json

@@ -1,7 +1,7 @@
 {
    "extends": "./tsconfig.common.json",
    "include": ["src"],
-    "exclude": ["src/**/__*", "src/**/*.test.ts", "src/browser/client-scripts"],
+    "exclude": ["src/**/__*", "src/**/*.test.ts", "src/browser/client-scripts", "src/bundle"],


src/bundle should not be build by typescript. I build it using esbuild

DudaGod · 2024-03-19T17:02:27Z

src/test-reader/test-transformer.ts

@@ -0,0 +1,3 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+export const setupTransformHook: () => VoidFunction = require("../bundle").setupTransformHook;
+export const TRANSFORM_EXTENSIONS: string[] = require("../bundle").TRANSFORM_EXTENSIONS;


Here I use require in order to ts not understand that folder bundle should be builded. If I use import tsc build it even if exclude it in tsconfig

I suggest adding this comment to the code as well.

To me it seems like typescript's project references would allow the use of imports here, but don't include those files in build. But probably not worth spending time on this right now, maybe just leave a todo in the comment.

shadowusr

Great additions overall! =)

shadowusr · 2024-03-19T22:07:30Z

package.json

@@ -8,7 +8,8 @@
    "typings"
  ],
  "scripts": {
-    "build": "tsc && npm run copy-static",
+    "build": "tsc && npm run copy-static && npm run build-bundle -- --minify",
+    "build-bundle": "esbuild ./src/bundle/index.ts --outdir=./build/src/bundle --bundle --format=cjs --platform=node --target=ES2021",


I think we should add it to the watch script as well.

In watch script, we can either build the bundle once on startup, or make 2 separate scripts like watch:bundle watch:src and unite them in watch script via concurrently (we use the same approach in html-reporter).

I'm not sure how often we'll want to change (watch) bundle contents, so it's up to you to decide.

shadowusr · 2024-03-19T22:25:25Z

src/test-reader/test-transformer.ts

@@ -0,0 +1,3 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+export const setupTransformHook: () => VoidFunction = require("../bundle").setupTransformHook;
+export const TRANSFORM_EXTENSIONS: string[] = require("../bundle").TRANSFORM_EXTENSIONS;


I suggest adding this comment to the code as well.

To me it seems like typescript's project references would allow the use of imports here, but don't include those files in build. But probably not worth spending time on this right now, maybe just leave a todo in the comment.

DudaGod commented Feb 29, 2024

View reviewed changes

DudaGod force-pushed the HERMIONE-1420.read_jsx_tsx branch 3 times, most recently from 663111e to 52ae8d2 Compare February 29, 2024 13:09

DudaGod changed the base branch from master to component_testing March 19, 2024 11:00

feat: ability to read tests in ".jsx" and ".tsx" files

f06ff9c

DudaGod force-pushed the HERMIONE-1420.read_jsx_tsx branch 2 times, most recently from a3eebf6 to f06ff9c Compare March 19, 2024 16:47

DudaGod commented Mar 19, 2024

View reviewed changes

shadowusr approved these changes Mar 19, 2024

View reviewed changes

DudaGod merged commit 578a599 into component_testing Mar 21, 2024
2 checks passed

DudaGod deleted the HERMIONE-1420.read_jsx_tsx branch March 21, 2024 12:52

DudaGod mentioned this pull request Mar 21, 2024

chore: add bundle watchder #879

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ability to read tests in ".jsx" and ".tsx" files #851

feat: ability to read tests in ".jsx" and ".tsx" files #851

DudaGod commented Feb 29, 2024

DudaGod Feb 29, 2024

DudaGod Feb 29, 2024

DudaGod Feb 29, 2024

DudaGod Feb 29, 2024

DudaGod Feb 29, 2024

DudaGod Feb 29, 2024

DudaGod Feb 29, 2024

DudaGod Feb 29, 2024

DudaGod Feb 29, 2024

DudaGod Mar 19, 2024

shadowusr Mar 19, 2024

DudaGod Mar 21, 2024

DudaGod Mar 19, 2024

DudaGod Mar 19, 2024

DudaGod Mar 19, 2024

DudaGod Mar 19, 2024

DudaGod Mar 19, 2024

DudaGod Mar 19, 2024

shadowusr Mar 19, 2024

shadowusr left a comment

shadowusr Mar 19, 2024

shadowusr Mar 19, 2024

		@@ -0,0 +1,2 @@
		export const TRANSFORM_EXTENSIONS = [".jsx", ".cjsx", ".mjsx", ".tsx", ".ctsx", ".mtsx"];

		@@ -0,0 +1,2 @@
		export const TRANSFORM_EXTENSIONS = [".jsx", ".cjsx", ".mjsx", ".tsx", ".ctsx", ".mtsx"];
		export const JS_EXTENSION_RE = /^\.([cm]?[tj]sx?\|json)$/;

feat: ability to read tests in ".jsx" and ".tsx" files #851

feat: ability to read tests in ".jsx" and ".tsx" files #851

Conversation

DudaGod commented Feb 29, 2024

What is done

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shadowusr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment