@react-spring/mock-raf
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    @react-spring/mock-raf

    A simple mock for requestAnimationFrame testing with fake timers.

    Adapted with gratitude from react-motion.

    Example

    To use with jest/jasmine and react-spring:

    import createMockRaf from '@react-spring/mock-raf'
    import { Globals, FrameLoop, SpringValue } from 'react-spring'
     
    let mockRaf
    beforeEach(() => {
      mockRaf = createMockRaf()
      Globals.assign({
        now: mockRaf.now,
        performanceNow: mockRaf.now,
        requestAnimationFrame: mockRaf.raf,
        cancelAnimationFrame: mockRaf.cancel,
        frameLoop: new FrameLoop(),
      })
    })
     
    it('animates from 0 to 1', () => {
      const value = new SpringValue(0)
      value.start(1)
     
      expect(value.get()).toBe(0)
      mockRaf.flush()
      expect(value.get()).toBe(1)
    })

    API

    createMockRaf()

    Creates a mockRaf instance, exposing the functions you'll use to interact with the mock.

    Returns:

    • now()
    • raf()
    • cancel()
    • step()
    const mockRaf = createMockRaf()

     

    now()

    Returns the current now value of the mock. Starts at 0 and increases with each step() taken. Useful for stubbing out performance.now() or a polyfill when using requestAnimationFrame with timers.

     

    raf()

    Replacement for requestAnimationFrame or a polyfill. Adds a callback to be fired on the next step.

     

    cancel()

    Replacement for cancelAnimationFrame or a polyfill. Removes all currently scheduled requestAnimationFrame callbacks from the queue.

     

    flush()

    Continuously iterate the requestAnimationFrame queue until empty.

    Useful for jumping to the end of an animation (or group of animations).

     

    step(options)

    Takes requestAnimationFrame steps. Fires currently queued callbacks for each step and increments now time for each step. The primary way to interact with a mockRaf instance for testing.

    Options

    step() takes an optional options object:

    time

    Type: Number Default: 1000 / 60

    The time that should pass during each requestAnimationFrame step in milliseconds. Default is roughly equivalent to default browser behavior.

    count

    Type: Number Default: 1

    The number of steps to take.

    Keywords

    none

    Install

    npm i @react-spring/mock-raf

    DownloadsWeekly Downloads

    860

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    6.21 kB

    Total Files

    5

    Last publish

    Collaborators

    • tdfka_rick