Windsurf
testing
Jest Mocking Not Working with ESM in Windsurf Project
Jest mocking doesn't work in your Windsurf-generated project that uses ES modules (ESM). jest.mock() calls are silently ignored, mocked modules still return real implementations, or you get errors about import statements not being mockable. Tests that should use mocked dependencies are hitting real APIs or databases.
This is one of the most common testing frustrations in modern JavaScript projects. Jest was designed for CommonJS (require), and its mocking system doesn't work the same way with ESM imports. Cascade generates test files with jest.mock() patterns that only work in CommonJS, leading to tests that appear to set up mocks correctly but actually use the real modules.
You might notice this when tests make real HTTP requests, modify your actual database, or fail with authentication errors — all signs that mocking isn't working and real dependencies are being used.
Error Messages You Might See
jest.mock() is not allowed in ESM
The module factory of jest.mock() is not allowed to reference any out-of-scope variables
SyntaxError: Cannot use import statement outside a module
Mock not working: received real implementation instead of mock
TypeError: jest.unstable_mockModule is not a function
Common Causes
- jest.mock() hoisting doesn't work with ESM — In CommonJS, Jest hoists jest.mock() calls to the top of the file. With ESM, import statements are evaluated before any code runs, so mocks aren't in place when imports execute
- Missing babel/ts-jest transformation — Without proper transformation, import statements aren't converted to requires, and Jest's mock system can't intercept them
- Using import instead of require in mock setup — Mocked modules imported with static import get the real module, not the mock
- jest.config using wrong transform — The Jest configuration doesn't have the correct transform for .ts or .tsx files with ESM syntax
- Mock factory function returning wrong shape — The mock factory doesn't match the module's export shape (named exports vs default export)
How to Fix It
- Use jest.unstable_mockModule for ESM — Replace jest.mock() with jest.unstable_mockModule() and use dynamic import() after setting up mocks
- Configure ts-jest or babel-jest properly — Ensure your Jest config transforms ESM to CJS: transform: { '^.+\\.tsx?$': 'ts-jest' } with useESM: true in ts-jest config
- Use dependency injection instead — Refactor code to accept dependencies as parameters rather than importing them directly. This makes testing trivial regardless of module system
- Match mock shape to real module — For named exports, return an object with all exported names. For default exports, use { __esModule: true, default: mockFn }
- Consider Vitest as an alternative — Vitest has native ESM support and a Jest-compatible API. Migration is often straightforward and fixes ESM mocking issues
- Use manual mocks in __mocks__ directory — Create a __mocks__/module-name.ts file that Jest automatically uses. This approach works with both CJS and ESM
Real developers can help you.
David Olverson
Solo dev shipping production apps with AI-assisted development. I specialize in rescuing broken Lovable/Bolt/Cursor builds and taking them to production. 10+ apps shipped including SaaS CRMs, gaming platforms, real estate tools, and Discord bots. Stack: Next.js 16, TypeScript, Tailwind CSS, FastAPI, PostgreSQL, Prisma. I use Claude Code with 50+ custom skills for rapid delivery. Average turnaround: 2-4 weeks from broken prototype to production.
Krishna Sai Kuncha
Experienced Professional Full stack Developer with 8+ years of experience across react, python, js, ts, golang and react-native. Developed inhouse websearch tooling for AI before websearch was solved : )
Tejas Chokhawala
Full-stack engineer with 5 years experience building production web apps using React, Next.js and TypeScript.
Focused on performance, clean architecture and shipping fast.
Experienced with Supabase/Postgres backends, Stripe billing, and building AI-assisted developer tools.
hanson1014
Full-stack developer experienced in fixing and deploying AI-generated apps from Lovable, Bolt.new, Cursor, and Replit. I specialize in debugging Supabase integration issues (auth flows, RLS policies, database connections), fixing broken deployments, resolving routing/blank screen problems, and cleaning up messy React/Vite codebases. I also build production apps with the Claude API and have shipped a Mac desktop dev tool (Nexterm from scratch. Based in Hong Kong, fast turnaround.
Kingsley Omage
Fullstack software engineer passionate about AI Agents, blockchain, LLMs.
Caio Rodrigues
I'm a full-stack developer focused on building practical and scalable web applications. My main experience is with **React, TypeScript, and modern frontend architectures**, where I prioritize clean code, component reusability, and maintainable project structures.
I have strong experience working with **dynamic forms, state management (Redux / React Hook Form), and complex data-driven interfaces**. I enjoy solving real-world problems by turning ideas into reliable software that companies can actually use in their daily operations.
Beyond coding, I care about **software quality and architecture**, following best practices for componentization, code organization, and performance optimization.
I'm also comfortable working across the stack when needed, integrating APIs, handling business logic, and helping transform prototypes into production-ready systems.
My goal is always to deliver solutions that are **simple, efficient, and genuinely useful for the people using them.**
Basel Issmail
’m a Senior Full-Stack Developer and Tech Lead with experience designing and building scalable web platforms. I work across the full development lifecycle, from translating business requirements into technical architecture to delivering reliable production systems.
My work focuses on modern web technologies, including TypeScript, Angular, Node.js, and cloud-based architectures. I enjoy solving complex technical problems and helping teams turn product ideas and prototypes into working platforms that can grow and scale.
In addition to development, I often collaborate closely with product managers, business analysts, designers, and QA teams to ensure that solutions align with both technical and business goals.
I enjoy working with startups and product teams where I can contribute both as a hands-on engineer and as a technical partner in designing and delivering impactful software.
Richard McSorley
Full-Stack Software Engineer with 8+ years building high-performance applications for enterprise clients. Shipped production systems at Walmart (4,000+ stores), Cigna (20M+ users), and Arkansas Blue Cross. 5 patents in retail/supply chain tech. Currently focused on AI integrations, automation tools, and TypeScript-first architectures.
Matt Butler
Software Engineer @ AWS
Daniel Vázquez
Software Engineer with over 10 years of experience on Startups, Government, big tech industry & consulting.
You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.
Get HelpFrequently Asked Questions
Why doesn't jest.mock() work with ES modules?
jest.mock() relies on hoisting the mock setup before require() calls. With ESM, import statements are resolved at parse time before any code runs, so jest.mock() hasn't executed yet when imports are resolved. Use jest.unstable_mockModule() with dynamic import() instead.
Should I switch from Jest to Vitest?
If you're fighting ESM mocking issues, Vitest is worth considering. It has native ESM support, a nearly identical API to Jest, and handles module mocking natively. Migration is usually just changing imports and config, not rewriting tests.