Vitest is unable to mock graphql-ws (websockets )

[MenouerBetty]

Describe the bug

WebSocket Implementation Error in Vitest Tests

When running tests for my breadcrumbs.test.ts, I'm encountering a WebSocket implementation error:

Error: WebSocket implementation missing; on Node you can import WebSocket from 'ws'; and pass webSocketImpl: WebSocket to createClient
❯ Module.createClient ../../node_modules/.pnpm/graphql-ws@5.16.0_graphql@16.8.1/node_modules/graphql-ws/lib/client.mjs:73:15
❯ ../common/src/client/socketLink.ts:23:3

The error occurs because @my-bb/common package (which contains our GraphQL type definitions and Apollo client setup) is trying to create a WebSocket connection through graphql-ws during test execution, even though I don't need WebSocket functionality for testing the breadcrumbs component.

Attempted Solutions:

1. Mocking the ws package:

vi.mock('ws', () => ({
  WebSocket: vi.fn().mockImplementation(() => ({
    on: vi.fn(),
    off: vi.fn(),
    emit: vi.fn(),
    send: vi.fn(),
    close: vi.fn(),
  })),
}));

2. Mocking graphql-ws:

vi.mock('graphql-ws', () => ({
  createClient: vi.fn().mockImplementation(() => ({
    subscribe: vi.fn(),
    dispose: vi.fn(),
  })),
  GraphQLWsLink: vi.fn().mockImplementation(() => ({
    request: vi.fn(),
  })),
}));

3. Creating a global WebSocket mock:

Copyclass MockWebSocket implements WebSocket {
  // Full WebSocket interface implementation
}
global.WebSocket = MockWebSocket;

4. Mocking the socketLink in @my-bb/common:

vi.mock('@my-bb/common', () => ({
  // ... other mocks ...
  socketLink: {
    request: vi.fn(),
  },
}));

What I Want to Achieve:
I want to be able to run tests for components that import from @my-bb/common without having to set up actual WebSocket connections. The breadcrumbs component doesn't use WebSocket functionality, but because it imports from @my-bb/common (which sets up Apollo client with GraphQL), it's trying to initialize the WebSocket client.
Desired Behavior:

• Tests should run without requiring WebSocket implementation
• Components that don't use WebSocket functionality should be testable in isolation
• Mocks should prevent WebSocket initialization during tests

Reproduction

Steps to Reproduce

1. Set up a monorepo project with multiple packages

   git clone [example-monorepo]
   cd [example-monorepo]
   

Have a common package that sets up Apollo Client with GraphQL WebSocket subscriptions

Package structure

packages/
common/ # Package with shared GraphQL/Apollo setup
feature-module/ # Package that imports from common

The common package contains Apollo Client setup with WebSocket subscriptions:
// packages/common/src/client/index.js

import { createClient } from 'graphql-ws';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';

const wsLink = new GraphQLWsLink(
  createClient({
    url: 'ws://localhost:4000/graphql'
  })
);

// Apollo client setup with wsLink

// packages/feature-module/src/tests/component.test.js
import { someFunction } from '@org/common';

describe('Component', () => {
test('should work', () => {
// Test logic that doesn't use WebSocket
});
});

Create a test in the feature module that imports from the common package:
// packages/feature-module/src/tests/component.test.js

import { someFunction } from '@org/common';

describe('Component', () => {
  test('should work', () => {
    // Test logic that doesn't use WebSocket
  });
});

Run the test with Vitest

cd packages/feature-module
pnpm test

Observe the WebSocket implementation error even though the test isn't using WebSocket functionality:
Error: WebSocket implementation missing; on Node you can import WebSocket from 'ws'; and pass webSocketImpl: WebSocket to createClient

System Info

System:
    OS: macOS 15.3.1
    CPU: (8) arm64 Apple M2
    Memory: 131.97 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.3 - ~/.nvm/versions/node/v21.7.3/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v21.7.3/bin/npm
    pnpm: 9.15.5 - ~/Library/pnpm/pnpm
    bun: 1.2.4 - ~/.bun/bin/bun
  Browsers:
    Chrome: 134.0.6998.89
    Safari: 18.3
  npmPackages:
    @vitest/coverage-v8: ^1.3.1 => 1.6.1 
    vitest: ^1.3.1 => 1.6.1 
    vitest-websocket-mock: ^0.4.0 => 0.4.0

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.