How do I import helper functions from TSX file?

[phil-loops]

The problem

Demo project here: https://github.com/philoops/cypress-with-tsx

• started off with a template t3 app
• added cypress
• added export const add = (a: number, b: number) => a + b; to a tsx file
• make a test:

import { add } from "../../src/pages/index";

describe("doing some math", () => {
  it("can add numbers", () => {
    expect(add(1, 2)).to.equal(3);
  });
});

• anger cypress:

Error: Webpack Compilation Error
./src/pages/index.tsx 3:11
Module parse failed: Unexpected token (3:11)
File was processed with these loaders:
 * ../../Library/Caches/Cypress/12.9.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| export const add = (a, b) => a + b;
| const Home = () => {
>     return <>home page</>;
| };
| export default Home;

I tried setting up webpack to compile TSX files for cypress, but to no avail:

import { defineConfig } from "cypress";
import webpack from "webpack";
import path from "path";
import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
import CypressWebpackPlugin from "@cypress/webpack-preprocessor";

const webpackOptions: webpack.Configuration = {
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
    plugins: [
      new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, "./tsconfig.json"),
      }),
    ],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: "ts-loader",
          },
        ],
      },
    ],
  },
};

const preprocessor = CypressWebpackPlugin({ webpackOptions });

export default defineConfig({
  e2e: {
    setupNodeEvents: (on, config) => {
      on("file:preprocessor", preprocessor);

      return config;
    },
  },
});

Any ideas how I can make some progress? I know that refactoring the add function to be in its own typescript file makes the tests able to compile. However, for the parallel problem I'm solving, such a refactor is probably not possible.

[schester44]

hey, we could use some help here as well. We're importing code in the setupNodeEvents function that references .tsx files. We're getting a "Cannot find module" error. I have "jsx" set to "react-jsx" in tsconfig.json.

[phil-loops]

(sorry I misread your post the first time)

I never did figure out how to directly import TSX files to the cypress.config.ts file despite tinkering with moduleResolution and jsx keys.

To work around this issue, I used the @cypress/webpack-preprocessor package, and added the following to my setupNodeEvents:

on(
        "file:preprocessor",
        webpackPreprocessor({
          webpackOptions: {
            resolve: {
              extensions: [".ts", ".tsx", ".js"],
              modules: [__dirname, "node_modules"],
            },
            module: {
              rules: [
                {
                  test: /\.tsx?$/,
                  loader: "ts-loader",
                  options: {
                    transpileOnly: true,
                    configFile: path.resolve(
                      __dirname,
                      "cypress/tsconfig.json"
                    ),
                  },
                },
              ],
            },
          },
        })
      );

This configuration let me import directly from TSX within the cypress subfolder. For reference, this is my cypress tsconfig:

{
  "compilerOptions": {
    "baseUrl": "..",
    "target": "es5",
    "moduleResolution": "node",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"],
    "jsx": "react"
  },
  "include": ["**/*.ts"]
}

[schester44]

so the above let you import .tsx files in cypress.config.ts?

[phil-loops]

No, as I mention, I never did figure it out. However, that configuration let me import from TSX files into my cypress tests.

Still seeking a config that would let me import TSX into the cypress config.