pmndrs/react-three-fiber · warning
Handler for ${eventName} was not found. You must pass event
Error message
Handler for ${eventName} was not found. You must pass event names in camelCase or name of the handler https://github.com/pmndrs/react-three-fiber/blob/master/packages/test-renderer/markdown/rttr.md#create-fireevent What it means
fireEvent looks up the handler for eventName on the instance's props; when no prop matching that name is a function, it warns that the handler was not found and reminds you that event names must be camelCase (e.g. onClick) or be the exact handler prop name. The event is then not delivered because there is nothing to call.
Source
Thrown at packages/test-renderer/src/fireEvent.ts:27
export const createEventFirer = (act: Act, store: RootStore) => {
const findEventHandler = (
element: ReactThreeTestInstance,
eventName: string,
): ((event: MockSyntheticEvent) => any) | null => {
const eventHandlerName = toEventHandlerName(eventName)
const props = element.props
if (typeof props[eventHandlerName] === 'function') {
return props[eventHandlerName]
}
if (typeof props[eventName] === 'function') {
return props[eventName]
}
console.warn(
`Handler for ${eventName} was not found. You must pass event names in camelCase or name of the handler https://github.com/pmndrs/react-three-fiber/blob/master/packages/test-renderer/markdown/rttr.md#create-fireevent`,
)
return null
}
const createSyntheticEvent = (element: ReactThreeTestInstance, data: MockEventData): MockSyntheticEvent => {
const raycastEvent = {
camera: store.getState().camera,
stopPropagation: () => {},
target: element,
currentTarget: element,
sourceEvent: data,
...data,
}
return raycastEvent
}
View on GitHub (pinned to ff3899dbf4)
Solutions
- Use the exact camelCase handler prop name: fireEvent(mesh, 'onClick') not 'click'
- Verify the target instance actually has the handler: Object.keys(instance.props) before firing
- Fiber the event on the element that declares the handler (e.g. the mesh with onClick), not a parent group
- Update @react-three/test-renderer to get current fireEvent semantics
Example fix
// before fireEvent(mesh, 'click') // after fireEvent(mesh, 'onClick')
Defensive patterns
Strategy: type-guard
Validate before calling
const hasHandler = (instance: any, eventName: string) => typeof instance?.props?.[eventName] === 'function' if (hasHandler(mesh, 'onClick')) fireEvent(mesh, 'onClick')
Type guard
const hasEventHandler = (instance: any, eventName: string): eventName is 'onClick' | 'onPointerOver' | (string & {}) =>
typeof instance?.props?.[eventName] === 'function' Prevention
- Always fire the camelCase handler prop name ('onClick', not 'click')
- Assert handler presence before firing to turn the warning into a test failure
- Fire on the exact element whose props declare the handler
When it happens
Trigger: Calling fireEvent(instance, 'click') or fireEvent(instance, 'Click') when the element was rendered with onClick={fn}; or firing an event name the element never received a handler prop for.
Common situations: Porting tests from RTL where lowercase names worked, typos in event names, firing on an element whose handler lives on a different node in the R3F tree, or handler attached via pointer-events config rather than props.
Related errors
AI-assisted analysis of pmndrs/react-three-fiber@ff3899dbf4 (2026-08-28).
Data as JSON: /api/errors/963cbb6f5af1169a.
Report an issue: GitHub.