Forem: Pablo Garcia

Mocking framer-motion v9

Pablo Garcia — Mon, 16 Jun 2025 21:20:10 +0000

Animations can make your UI feel alive, but in tests they often introduce flakiness and slow things down. Here is a strategy that:

Makes every motion component render with zero-second transitions
Keeps AnimatePresence alive so exit/enter lifecycles fire naturally
Lets you override durations on a per-test basis
Plays nicely with Jest’s module system and React’s context API

I based my solution loosely on: https://dev.to/tmikeschu/mocking-framer-motion-v4-19go

Why this approach?

Instant animations everywhere
No need to stub out AnimatePresence
Full framer-motion API stays available
No tedious timer advancement for framer-motion internals
Optional override to test nonzero durations
Since AnimatePresence still works, your enter/exit lifecycles fire as expected, so you can use await waitFor(...) when needed - ⚠️ NOTE: see "Shortcomings of the onLayoutAnimationComplete shim" section.

Solution - Jest Mock

Create a Jest setup file (e.g. jest.setup.js) and point your jest.config.js’s setupFilesAfterEnv at it. Inside:

// jest.setup.js
const actual = jest.requireActual('framer-motion')
const { forwardRef, createElement, useContext } = jest.requireActual('react')

// Recursively zero out any duration props in motion configs
function deepReplaceDurations(props, duration) {
  // extract only motion props
  const patch = Object.fromEntries(
    Object.entries(props).filter(([key]) => actual.isValidMotionProp(key))
  )
  const stack = [patch]
  while (stack.length) {
    const cur = stack.pop()
    if (!cur || typeof cur !== 'object') continue
    for (const [key, val] of Object.entries(cur)) {
      if (key === 'duration') {
        cur[key] = duration
      } else if (val && typeof val === 'object') {
        stack.push(val)
      }
    }
  }
  // merge patched motion props back into original props
  return { ...props, ...patch }
}

// Layout animations don’t actually run under Jest, so we “fake”
// them. This helper merges the regular animation callback and
// the layout callback into one, letting you test 
// onLayoutAnimationComplete as well.
const mockOnLayoutAnimationComplete = (props) => (...args) => {
  props.onAnimationComplete?.(...args)
  props.onLayoutAnimationComplete?.(...args)
}

// Proxy componentCache to wrap every motion.<el> on the fly
const componentCache = new Map()
const motion = new Proxy(actual.motion, {
  get(target, key) {
    const Comp = target[key]
    if (!Comp) return Comp

    // Only create one wrapper per component name
    if (!componentCache.has(key)) {
      const Wrapped = forwardRef((props, ref) => {
        // pull duration override from MotionConfigContext
        const cfg = useContext(actual.MotionConfigContext)
        const dur = cfg?.transition?.duration

        // Since Jest won’t run Framer’s layout animations, we
        // manually invoke the callback on every render. If your
        // callback triggers way too early, you will need to
        // add an if-statement to avoid it.
        useEffect(() => {
            patched?.onLayoutAnimationComplete?.();
        });

        // IFF dur is number, zero-out all durations
        const patched = typeof dur === 'number'
          ? deepReplaceDurations(props, dur)
          : props

        return createElement(
            Comp,
            {
                ...patched,
                // wire up both callbacks to unblock your 
                // onLayoutAnimationComplete tests.
                onAnimationComplete:
                    mockOnLayoutAnimationComplete(patched),
                ref,
            },
            props.children
        );
      })
      componentCache.set(key, Wrapped)
    }

    return componentCache.get(key)
  }
})

// re-export everything from framer-motion, but swap out motion
module.exports = {
  ...actual,
  __esModule: true,
  motion,
}

Usage in your tests

Wrap your component under test with MotionConfig in order to apply the zero-duration override:

import { MotionConfig } from 'framer-motion'
import { render, screen, waitFor } from '@testing-library/react'
import MyAnimatedComponent from './MyAnimatedComponent'

test('it fades in text', async () => {
  render(
    <MotionConfig transition={{ duration: 0 }}>
      <MyAnimatedComponent />
    </MotionConfig>
  )

  // animation is instant, but lifecycle is async
  await waitFor(() => {
    expect(screen.getByText('Hello')).toBeVisible()
  })
})

If you omit the transition prop or pass undefined, the mock leaves your props unchanged. That means you can still test nonzero durations in specific cases:

render(
  <MotionConfig transition={{ duration: 1 }}>
    <MyAnimatedComponent />
  </MotionConfig>
)

// this will actually wait about 1s worth of frames under the hood
await waitFor(() => {
  expect(someStub).toHaveBeenCalled()
})

Scalability notes

Proxy catches new motion exports - if framer-motion adds motion.svg or motion.video in v9+, the proxy will wrap them automatically without extra maintenance
Component cache - we reuse one wrapper per element type, so overhead stays constant no matter how many times you render
Deep walker cost - zeroing out durations is O(n) in the size of the props object. In practice props stay small, so you won't notice it in your CI pipeline
Async lifecycles - since framer-motion still uses requestAnimationFrame, animations resolve on the next frame tick. You will still need await waitFor(...) or Jest timers if you want to drive them faster

⚠️ Shortcomings of the `onLayoutAnimationComplete` shim

Framer-Motion’s layout animations (and its onLayoutAnimationComplete) don’t actually run under Jest, so I've introduced a partial shim mockOnLayoutAnimationComplete helper plus a useEffect that fires onLayoutAnimationComplete on every render. While this lets you test your layout-complete logic, it has some caveats:

Over-triggering: Fires on each render, leading to duplicate calls.
Merged timing: Animation and layout callbacks run back-to-back, not on separate frames.
Immediate effects: Handlers execute on mount, ignoring real transition delays.
Fragile tests: May need guards (e.g. hasAnimated flag) to prevent early or repeated invocations.

Workarounds

Add conditional checks or render-count flags in your callback
Simulate frame delays in a custom mock
For precise timing, test layout animations in integration/E2E suites

Wrapping up

With this mock in place you get:

Instant animations by default
Fully functional mounting/unmounting lifecycles (AnimatePresence still works)
Ability to enable or disable animations per test
Minimal ongoing maintenance as framer-motion evolves

Feel free to tweak the deep walker (for example, zero out delay too), or stub new hooks in v9 if you adopt them. For most motion-based components, this pattern scales nicely and keeps your tests fast and reliable.

Print a single element from a webpage using JavaScript

Pablo Garcia — Mon, 18 Dec 2023 22:18:26 +0000

I use this code snippet in the dev tools to print a small portion of a webpage. It copies every CSS stylesheet in the head of the page which helps render the printed content as close as possible to how it appears in the browser.

function printElement(element) {
    const newWin = window.open('', 'Print-Window');

    // Copy all stylesheets
    let stylesheets = '';
    for (var i = 0; i < document.styleSheets.length; i++) {
        if (document.styleSheets[i].href) {
            stylesheets += '<link rel="stylesheet" href="' + document.styleSheets[i].href + '" type="text/css">';
        }
    }

    newWin.document.open();
    newWin.document.write('<html><head>' + stylesheets + '</head><body>' + element.innerHTML + '</body></html>');
    newWin.document.close();
    setTimeout(function () {
        newWin.print();
        // newWin.close(); // close tab after printing
    }, 250); // Delay to ensure styles are applied
}

// Usage
// printElement(document.getElementById('myElementId'));
// printElement(document.querySelector('#myElementId'));
// 
// If you already have an element selected in the dev tools:
// printElement($0);

How to use

Open the dev tools
Copy & paste the function above into the Console
Select the div you want to print
Then run printElement($0)

Examples

As shown in the screenshot above, I use this often with ChatGPT responses when I want to print just one answer that might be too long to fit on a screenshot. This is actually helpful if you are creating GPTs, where you need to upload a PDF from one of the responses from GPT.

For example, this is how it looks originaly:

This is how it looks when running printElement($0); on that div:

And this is what it looks if you close the print dialog:

Conclusion

Although this simple function isn't 100% bullet proof, it helps printing certain parts of a website while attempting to keep the styles as best as it can.

Normalizing or interpolating values in JavaScript/TypeScript

Pablo Garcia — Wed, 13 Dec 2023 23:14:56 +0000

These are three common normalizing functions I use in JavaScript when working with CSS animations/transitions, especially when playing with motion sensors.

Standard Normalization

This function scales a number so that it falls within a standard range of 0 to 1. This is the common meaning of "normalization" in data processing.

Commonly used in data processing and analysis to standardize different sets of data on a common scale, such as in machine learning feature scaling.

function normalize(
  value: number, 
  minValue: number, 
  maxValue: number
): number {
    if (maxValue === minValue) {
        return value === minValue ? 1 : 0;
    }
    return (value - minValue) / (maxValue - minValue);
}

// Example Usage
console.log(normalize(15, 10, 20)); // 0.5
console.log(normalize(30, 20, 40)); // 0.5

Linear Interpolation

This function maps a number from one range to another. It's a form of linear interpolation.

Useful for scaling values, normalizing data to a different range, or converting between different measurement scales.

function linearInterpolation(
  value: number,
  originLowerBound: number,
  originUpperBound: number,
  targetLowerBound: number,
  targetUpperBound: number
): number {
  // Note: we should use the `normalize` function above
  // const ratio = normalize(value, originLowerBound, originUpperBound)
  const ratio =
    (value - originLowerBound) / (originUpperBound - originLowerBound);
  return ratio * (targetUpperBound - targetLowerBound) + targetLowerBound;
}

// Example Usage
const mappedValue = linearInterpolation(5, 0, 10, 0, 100);
console.log(mappedValue); // Should output 50

For example: [1,5] & [10,50] ranges.

1 outputs 10
2 outputs 20
...

Modular Arithmetic-Based Wrapping

This function ensures that a given value is wrapped within a specified numeric range. If the value exceeds the range, it wraps around within this range using modular arithmetic.

Ideal for cyclic or repeating ranges, like angles (think CSS transformations from 0 to 360 degrees), hours on a clock, or other periodic values.

function cyclicInterpolation(
  value: number,
  lowerBound: number,
  upperBound: number
): number {
  // adding 1 to include the upper bound in the range
  const shiftedUpperBound = upperBound - lowerBound + 1;
  const shiftedValue = value - lowerBound;
  return (
    lowerBound +
    // adding parenthesis for emphasis
    (((shiftedValue % shiftedUpperBound) + shiftedUpperBound) %
      shiftedUpperBound)
  );
}

// Example Usage
console.log(cyclicInterpolation(5, 3, 7)); // Outputs 5
console.log(cyclicInterpolation(6, 3, 7)); // Outputs 6
console.log(cyclicInterpolation(7, 3, 7)); // Outputs 7
console.log(cyclicInterpolation(8, 3, 7)); // Outputs 3 - restarts cycle

For example: [1,10]

1 outputs 1
9 outputs 9
10 outputs 10
11 outputs 1 - going back to the beginning

TypeScript - The Important Bits / Summary

Pablo Garcia — Sun, 06 Nov 2022 18:23:55 +0000

Syntax

Contrary to other typed languages, TypeScript doesn’t use “types on the left”-style declarations like int x = 0;. In TypeScript, type annotations go after the value being typed.

const x: number = getSomeNum()
let y: string[] = [] // array of strings

function fn(x: number, y?: string): boolean { ... }
let fn: (x: number, y?: string) => boolean = (x, y) => ...;

type Sample = {
  x: number;
  y: string[];
  z?: boolean; // Optional

  // functions
  fn: (x: number) => void; // Arrow func field
  fn(x: number): void; // Function

  // Callable types
  (): void; // Type can be executed
  (x: number): number; // Overloaded type
  new (s: string): Sample; // Newable e.g. new Sample('foo')

  [key: string]: number; // Accepts any key value pairs

  readonly prop: string; // Readonly property
}

There are also interfaces. And classes can be used as types.

🚨 HINT: Use the TS cheat sheets: https://www.typescriptlang.org/cheatsheets

Structural Types

Objects and values are not of a single type because TypeScript's type system is structural, not nominal. So, the relationships between types are determined by the properties inside and not by a particular type:

class Phone { 
  on() {}
  off() {}
}
class TV {
  on() {}
  off() {}
  changeChannel() {}
}
// Note that the extra property in TV doesn’t 
// prevent assignment since it has all the 
// required properties in Phone.
let Samsung: Phone = new TV()

Type-erased output

TypeScript's type system is fully erased, meaning that the output code will be "type-erased" and won't contain any reference to the TS types. So, if we wanted to use reflection to determine the type of a value, it won't know about TypeScript types:

typeof (new Phone()) // "object", not "Phone"

Primitive Types

TypeScript has primitive types for all the JavaScript built-in types:

number
string
bigint
boolean
symbol
null
undefined
object

The type names String, Number, and Boolean (starting with capital letters) are legal, but refer to some special built-in types that will very rarely appear in your code. Always use string, number, or boolean for types.

Other important TypeScript types

Type	Explanation
any	turns off the type checker wherever it appears
object literal	eg `{ property: Type }`
void	a subtype of undefined intended for use as a return type, eg `(): void;`
T[]	arrays, eg `number[]`, `string[]`, also written `Array<T>`
[T, T]	tuples, which are fixed length but mutable, eg `[number, number, string]`
(t: T) => U	functions, eg `(count: number) => void;`
"explicit"	unit types, eg `(val: "foo" │ "bar"): void;`

Unions ("OR") / Intersections ("AND")

With unions, we can tell TypeScript a type can have two or more different shapes, while intersections tell TypeScript to see it as a single type.

type A = { foo: string };
type B = { bar: number };

type C = A | B; // either or, but not both
type D = A & B & { baz: () => void }; // { foo, bar, baz }

Note: there can be conflicts: type Conflict = { a: number } & { a: string };

Keep reading more

Creating a CLI tool using NodeJS and npm (part 2)

Pablo Garcia — Wed, 21 Sep 2022 20:36:22 +0000

September 21, 2022

In Creating a CLI tool using NodeJS and npm (part 1) I talked about the bare minimum requirements to create a CLI tool with npm and NodeJS.

In summary, our goal is to have two files:

package.json that includes "name", "bin", "version", and "fields".
path/to/bin/index.js (must include the node "shebang")

In this blog post, I want to talk about how to quickly start using the latest ECMAScript features without worrying about setting up bundlers of any kind such as webpack or rollup and make it 100% compatible across platforms.

How?

Using TypeScript!

Using TypeScript, we can bundle our code into a JavaScript "binary" (not really a binary), have access to the latest ECMAScript features, and export types to make it easy for other developers to work with our tool.

First, we modify our package.json to have types, and a build script (see Creating a CLI tool using NodeJS and npm (part 1) for Node CLI minimum viable product):

./package.json

{
  "name": "cli-tool",
  "version": "1.0.0",
  "fields": ["./dist/"],
  "bin": "./dist/index.js",
+ "types": "./dist/index.d.ts",
+ "script": {
+   "build": "rm -rf dist && tsc index.ts --declaration --allowJs --outDir dist"
+ }
}

Second, we create an index.ts file that will have our source code:

./index.ts

#!/usr/bin/env node

export default function ourTool(options: { message: string }) {
  console.log(`Hello ${options.message}`);
}

if (require.main === module) {
  // run directly from the command line as in "node xxx.js"
  const program = require("commander");
  const defaults = { message: "World" };

  program
    .version("0.1.0")
    .option("-m, --message [value]", "Message", defaults.message)
    .parse(process.argv);

  const options = program.opts();

  ourTool(options);
} else {
  // probably loaded by as a module or something else.
}

Notice that we use require.main === module to detect if the script is being executed as a command, otherwise we assume it is being imported as a module.

Also, I'm using commander to help us define the behavior of our CLI tool with ease.

Usage

Now we can build and run the tool like:

$ npm run build
$ node ./dist/index.js

Our you could also publish it to https://www.npmjs.com/ and install it our use it with npx:

$ npm i -g cli-tool

$ cli-tool --version
0.1.0

$ cli-tool
Hello World

$ cli-tool -m Pablo
Hello Pablo

$ npx cli-tool --help
Usage: cli-tool [options]

Options:
  -V, --version          output the version number
  -m, --message [value]  Message (default: "World")
  -h, --help             output usage information

Conclusion / What next?

Being able to use a single tool (i.e. TypeScript) to create an MVP and set us up and running is essential and underrated for a power developer.

Also, because we avoid magic (Babel, Webpack, Rollup, ...) and focus only on using a compiler to bundle our code, it's now easier to understand the barebones needed for NodeJS to work. This is extremely helpful for beginner NodeJS developers.

Creating a CLI tool using NodeJS and npm.

Pablo Garcia — Tue, 06 Aug 2019 06:18:30 +0000

August 5, 2019

TLDR at the end of the blog post.

Introduction

If you are like me, you want to read less and do more. I'll try to be brief.

We are going to build a simple CLI tool that can be installed globally using npm or executed without prior installation using npx. This tool will simply log "Hello World!" and I'll name it cli-tool.

In other words, the goal is to be able to run npx cli-tool or npm i -g cli-tool && cli-tool.

MVP (Minimum Viable Product)

Show me the code!

The simplest CLI tool consists of 3 steps:

package.json (must include "name" and "bin")
index.js (must include the node shebang)
npm link

{
  "name": "cli-tool",
  "bin": "./path/to/bin.js"
}

#!/usr/bin/env node
console.log("Hello World!")

We can now run npm link inside the repo and enjoy running cli-tool in the terminal. Note, you might want to run npm unlink if you want to revert this.

How does it work? npm link grabs the name from package.json and creates a symlink to the global modules. You can read more here.

MVP + npm + npx

We could also publish our module using npm publish. We would have to add "version" and "fields" props to package.json.

{
  "name": "cli-tool",
  "version": "1.0.0",
  "bin": "./path/to/bin/bin.js",
  "fields": ["./path/to/bin"]
}

Note: I modified the bin path to make this easier to understand.

The version will be displayed in npmjs.com when published and the fields property is a list of whitelisted paths to include. Meaning, only those fields will be uploaded. You can read more about the "fields" property here.

Now, after publishing our module in npmjs.com, running npx cli-tool or npm i -g cli-tool && cli-tool is possible.

Conclusion / What next?

The MVP is very important! It shows us our goal. No matter what we do, we MUST end with a package.json and a binary (node script).

Now that we know the goal, we can use bundlers like Webpack, Rollup, or Brunch to use the latest ECMAScript features and bundle the app into our ./path/to/bin directory.

We can also use tools that will help us define the behavior of our CLI tool, like Commander or Yargs.

And lastly, we can use tools that allow us to release the module without all the groin pains of keeping track of the version, changes, tags, and more, like release-it and release.

I myself do not like to rebuild the wheel. I love create-react-app and there is this tool which uses Rollup and create-react-app internally to create react libraries, this tool is called create-react-library. I simply remove the unneeded dependencies (i.e. React) and make sure that package.json contains what is needed for the module to run as a binary.

But all this is not part of this blog post. I will release part 2 where I add these tools.

TLDR

npm init
add "name", "bin", "version", and "fields" to package.json
add node "shebang" to the JavaScript script
npm publish
npx cli-tool or npm i -g cli-tool && cli-tool

End result:

package.json

{
  "name": "cli-tool",
  "version": "1.0.0",
  "bin": "./path/to/bin/bin.js",
  "fields": ["./path/to/bin"]
}

./path/to/bin/bin.js

#!/usr/bin/env node
console.log("Hello World!")

Forem: Pablo Garcia

Mocking framer-motion v9

Why this approach?

Solution - Jest Mock

Usage in your tests

Scalability notes

⚠️ Shortcomings of the onLayoutAnimationComplete shim

Wrapping up

Print a single element from a webpage using JavaScript

How to use

Examples

Conclusion

Normalizing or interpolating values in JavaScript/TypeScript

Standard Normalization

Linear Interpolation

Modular Arithmetic-Based Wrapping

TypeScript - The Important Bits / Summary

Syntax

Structural Types

Type-erased output

Primitive Types

Other important TypeScript types

Unions ("OR") / Intersections ("AND")

Keep reading more

Creating a CLI tool using NodeJS and npm (part 2)

Using TypeScript!

Usage

Conclusion / What next?

Creating a CLI tool using NodeJS and npm.

Introduction

MVP (Minimum Viable Product)

MVP + npm + npx

Conclusion / What next?

TLDR

⚠️ Shortcomings of the `onLayoutAnimationComplete` shim