Next.js Discord

Discord Forum

Cypress Component Test: Cannot find module 'react-server-dom-webpack/client'

Unanswered
Pacific sand lance posted this in #help-forum
Open in Discord
Pacific sand lanceOP
The following error originated from your test code, not from Cypress.


Cannot find module 'react-server-dom-webpack/client'



When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.



Cypress could not associate this error to any specific test.



We dynamically generated a new test to display this failure.



Im using NextJs 14 App router, and trying to test my component, but I keep getting the above error.

3 Replies

Pacific sand lanceOP
/* eslint-disable */
// Disable ESLint to prevent failing linting inside the Next.js repo.
// If you're using ESLint on your project, we recommend installing the ESLint Cypress plugin instead:
// https://github.com/cypress-io/eslint-plugin-cypress
// Cypress Component Test
import FriendsList from '@/app/components/FriendList';
import Providers from '@/app/components/Providers';
import { AppRouterContext } from 'next/dist/shared/lib/app-router-context.shared-runtime';

const router = {
  pathname: '/',
  route: '/',
  query: {},
  asPath: '/',
  push: () => {},
  replace: () => {},
  reload: () => {},
  back: () => {},
  prefetch: () => {},
  beforePopState: () => {},
  forward: () => {},
  refresh: () => {},
};

describe('<FriendsList />', () => {
  it('should render and display expected content', () => {
    cy.mount(
      <AppRouterContext.Provider value={router}>
        <Providers>
          <FriendsList />
        </Providers>
      </AppRouterContext.Provider>
    );

    cy.get('button').contains('Add Friend');
  });
});

export {};
'use client';
import {
  ListItem,
  UnorderedList,
  Button,
  Box,
  Text,
  VStack,
  Badge,
  Avatar,
  HStack,
  IconButton,
  Flex,
} from '@chakra-ui/react';
import { AddIcon, CheckIcon, CloseIcon, DeleteIcon } from '@chakra-ui/icons';
import { changeStatus } from '../lib/actions';
import { Friend } from '../lib/definitions';
import { useFormState } from 'react-dom';
import Link from 'next/link';

interface FriendsListProps {
  friends?: Friend[];
}

const initialState = { message: null, errors: {} };

export default function FriendsList({ friends }: FriendsListProps) {
  const [state, formAction] = useFormState(changeStatus, initialState);

  return (
    <>
      <Flex justifyContent="flex-end" mt={4}>
        <Button rightIcon={<AddIcon />} colorScheme="green" variant="solid" color={'white'}>
          <Link href={'/friends/addfriend'}>Add Friends</Link>
        </Button>
      </Flex>{' '}
      <form action={formAction}>
        {/*stuff*/}
      </form>
    </>
  );
}