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.
Pratik
SWE with 15+ years of experience building and maintaining web apps and extensive BE infrastructure
rayush33
JavaScript (React.js, React Native, Node.js) Developer with demonstrated industry experience of 4+ years, actively looking for opportunities to hone my skills as well as help small-scale business owners with solutions to technical problems
Jen Jacobsen
I’m a Full-Stack Developer with over 10 years of experience building modern web and mobile applications. I enjoy working across the full product lifecycle — turning ideas into real, well-built products that are intuitive for users and scalable for businesses.
I particularly enjoy building mobile apps, modern web platforms, and solving complex technical problems in a way that keeps systems clean, reliable, and easy to maintain.
Milan Surelia
Milan Surelia is a Mobile App Developer with 5+ years of experience crafting scalable, cross-platform apps at 7Span and Meticha. At 7Span, he engineers feature-rich Flutter apps with smooth performance and modern UI. As the Co-Founder of Meticha, he builds open-source tools and developer-focused products that solve real-world problems.
Expertise:
💡 Developing cross-platform apps using Flutter, Dart, and Jetpack Compose for Android, iOS, and Web.
🖋️ Sharing insights through technical writing, blogging, and open-source contributions.
🤝 Collaborating closely with designers, PMs, and developers to build seamless mobile experiences.
Notable Achievements:
🎯 Revamped the Vepaar app into Vepaar Store & CRM with a 2x performance boost and smoother UX.
🚀 Launched Compose101 — a Jetpack Compose starter kit to speed up Android development.
🌟 Open source contributions on Github & StackOverflow for Flutter & Dart
🎖️ Worked on improving app performance and user experience with smart solutions.
Milan is always happy to connect, work on new ideas, and explore the latest in technology.
Omar Faruk
As a Product Engineer at Klasio, I contributed to end-to-end product development, focusing on scalability, performance, and user experience.
My work spanned building and refining core features, developing dynamic website templates, integrating secure and reliable payment gateways, and optimizing the overall system architecture.
I played a key role in creating a scalable and maintainable platform to support educators and learners globally.
I'm enthusiastic about embracing new challenges and making meaningful contributions.
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 : )
MFox
Full-stack professional senior engineer (15+years). Extensive experience in software development, qa, and IP networking.
zipking
I am a technologist and product builder dedicated to creating high-impact solutions at the intersection of AI and specialized markets. Currently, I am focused on PropScan (EstateGuard), an AI-driven SaaS platform tailored for the Japanese real estate industry, and exploring the potential of Archify.
As an INFJ-T, I approach development with a "systems-thinking" mindset—balancing technical precision with a deep understanding of user needs. I particularly enjoy the challenge of architecting Vertical AI SaaS and optimizing Small Language Models (SLMs) to solve specific, real-world business problems. Whether I'm in a CTO-level leadership role or hands-on with the code, I thrive on building tools that turn complex data into actionable value.
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.
AUXLE
I am a Full Stack Developer experienced in building Websites, Web apps and Cross Platform Mobile Apps for Startups and Companies.
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.