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

  1. Use the exact camelCase handler prop name: fireEvent(mesh, 'onClick') not 'click'
  2. Verify the target instance actually has the handler: Object.keys(instance.props) before firing
  3. Fiber the event on the element that declares the handler (e.g. the mesh with onClick), not a parent group
  4. 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

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.