Test Remix component ?

[neviaumi]

I am working on making Cypress component test working on Remix project.

Here is my simple component for testing.

import type { V2_MetaFunction } from "@remix-run/node";
import * as remixNode from "@remix-run/node";
import { Container } from "@partner-global-ui/components";
import {useLoaderData} from "@remix-run/react"

export const meta: V2_MetaFunction = () => {
  return [{ title: "New Remix App" }];
};


export async function loader() {
  const res = await fetch("https://api.github.com/gists");
  return json(await res.json());
}

export default function Index() {
  const data = useLoaderData();
  return (
    <Container>
      <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
        <h1>Welcome to Remix</h1>
        <pre>{JSON.stringify(data, null, 4)}</pre>
      </div>
    </Container>
  );
}

My test content

import IndexPage from "./_index"
import React from "react";
import {unstable_createRemixStub} from "@remix-run/testing";

function mountRemixElement(...args: Parameters<typeof unstable_createRemixStub>) {
 cy.wrap(unstable_createRemixStub(routes, context)).then((Ele)=> {
    cy.mount(<Ele/>);
  })
}

describe('Test Index page', () => {
  it('should render the page', () => {
    mountRemixElement([      {
      path: "/", element: <IndexPage/>, loader() {
        return { message: "Hello World" };
      }
    }])
    // cy.mount(<div>
    //   <h1>Welcome to Remix</h1>
    // </div>);
    cy.get('h1').contains('Welcome to Remix')
  })
})

My Cypress config

import { defineConfig } from "cypress";
import { defineConfig as defindViteConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  component: {
    devServer: {
      framework: "react",
      bundler: "vite",
      viteConfig: defindViteConfig({
        optimizeDeps: {
          exclude: ['@remix-run/node']
        },
        plugins: [react()],
      })
    },
  },
});

The test it working, but I got a question about how I can keep import {json} from "@remix-run/node" instead of import * as remixNode from "@remix-run/node"; ?

[neviaumi]

For the record

Turn out i solved my problem by below config 👍

import { defineConfig } from "cypress";
import { defineConfig as defindViteConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nodePolyfills } from 'vite-plugin-node-polyfills'

export default defineConfig({
  component: {
    devServer: {
      framework: "react",
      bundler: "vite",
      viteConfig: defindViteConfig({
        plugins: [react(), nodePolyfills({
          exclude: ['fs']
        })],
      })
    },
  },
});