Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To mock a React child in Jest, replace its module with a small test component, then assert the parent’s rendered output or behavior. Use an inline factory for a one-off substitute, a manual mock when several tests need the same substitute, and a different registration pattern for native ECMAScript modules (ESM).
Mock a child module with an inline factory
For CommonJS-style tests or transformed imports that support Jest’s mock hoisting, register the mock in the test file that imports the parent. The module path must match the path the parent uses to import the child.
jest.mock('./Child', () => () => <mock-child />);This factory replaces the child module for this test file. JSX works only if the test transform supports it. If not, return a React element with React.createElement instead:
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →jest.mock('./Child', () => () =>
React.createElement('mock-child')
);A lowercase custom element is a suitable simple placeholder. Avoid returning an uppercase string such as 'Child' as the rendered result: Jest’s React tutorial notes that this can produce a React warning in snapshot tests. Text or a lowercase custom element are alternatives. Jest: Testing React Apps
#1 Best Overall
Pass through only what the parent needs
Keep the substitute simpler than the real child. If the parent’s behavior depends on a child callback, the stub can render a button that calls the supplied callback. The test can then check the parent’s response without recreating the child’s implementation. Avoid reproducing unrelated child behavior; the purpose is to isolate the parent, not to test the child indirectly.
Test the parent’s user-visible behavior
Render the parent and assert what a user can see or do, rather than asserting only that the mock was called. Jest’s React tutorial demonstrates DOM-based tests with @testing-library/react and interaction assertions. Mocking can help isolate a complex child, but it does not establish that the real child works when integrated. Keep the real child in tests whose goal is to verify that integration. Jest: Testing React Apps
Choose the right mock pattern
| Pattern | Use it when | How it works |
|---|---|---|
| Inline factory | One test file needs a purpose-built placeholder. | Call jest.mock('./Child', factory) in that test file; the factory returns the substitute component. Jest: Manual Mocks |
| Manual mock | Multiple tests need the same stable substitute. | Put the mock in a sibling __mocks__ directory and explicitly select it with jest.mock('./moduleName') for a user module. The directory name is case-sensitive. Jest: Manual Mocks |
A fully hand-maintained manual mock can drift from the real module. When suitable, Jest allows extending an automatic mock with jest.createMockFromModule. Jest: Manual Mocks
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsAccount for the module system
CommonJS and transformed imports
With CommonJS or a transform that supports Jest’s mock hoisting, jest.mock is generally registered before imports are evaluated. Keep the mock and the import that consumes it in the same test file. The mock applies to that file only: another test file that imports the same module gets the real implementation unless it declares its own mock. Jest: Manual Mocks
Native ESM
Static ESM imports are evaluated before test code, so the CommonJS-style hoisting pattern does not work for native ESM. Jest documents jest.unstable_mockModule for this case: register the mock first, then dynamically import the dependency and the module under test. Jest labels this API unstable, and behavior can depend on the Node version and whether the module graph can be evaluated synchronously. Check the instructions for your installed Jest version before relying on it. Jest: ECMAScript Modules
Match the factory to the export shape
If the mocked module uses a default export and the factory returns an object, Jest’s module-factory convention may require __esModule: true and a default property. Confirm how the actual module exports its component before choosing the factory’s return value. Jest: The Jest Object
Use the current mock-generation API
Older examples may use jest.genMockFromModule. Jest 30 removed that API; use jest.createMockFromModule in current code instead. Check the upgrade guide and documentation that match your project’s installed version. Jest: Upgrading to Jest 30
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
