npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

codemod-missing-await-act

v0.2.0

Published

Adds missing `await` to `act` calls or methods that like contain an `act` call using [jscodeshift](https://github.com/facebook/jscodeshift). We all track usage of these methods throughout the file. For example, given

Downloads

9

Readme

codemod-missing-await-act

Adds missing await to act calls or methods that like contain an act call using jscodeshift. We all track usage of these methods throughout the file. For example, given

import { act } from "react-dom/test-utils";

function focus(element) {
	act(() => {
		element.focus();
	});
}

test("focusing", () => {
	const { container } = render("<button />");

	focus(container);
});

will add an await to act and also add await to focus since focus is now an async method. The end result will be

import { act } from "react-dom/test-utils";

async function focus(element) {
	await act(() => {
		element.focus();
	});
}

test("focusing", async () => {
	const { container } = await render("<button />");

	await focus(container);
});

Right now we assume that any call to rerender and unmount should be awaited.

// codemod-missing-await/default-import-config.js
// Import aliases have no effect on the codemod.
// They're only used to not cause JS Syntax errors in this file.
// The codemod will only consider the imported name.
import {
	act,
	cleanup,
	/**
	 * @includeMemberCalls
	 * e.g. fireEvent.click()
	 */
	fireEvent,
	render,
	renderHook,
} from "@testing-library/react";
import {
	act as act2,
	cleanup as cleanup2,
	/**
	 * @includeMemberCalls
	 * e.g. fireEvent.click()
	 */
	fireEvent as fireEvent2,
	render as render2,
	renderHook as renderHook2,
} from "@testing-library/react/pure";
import {
	act as act3,
	cleanup as cleanup3,
	/**
	 * @includeMemberCalls
	 * e.g. fireEvent.click()
	 */
	fireEvent as fireEvent3,
	render as render3,
	renderHook as renderHook3,
} from "@testing-library/react-native";
import {
	act as act4,
	cleanup as cleanup4,
	/**
	 * @includeMemberCalls
	 * e.g. fireEvent.click()
	 */
	fireEvent as fireEvent4,
	render as render4,
	renderHook as renderHook4,
} from "@testing-library/react-native/pure";
import { unstable_act } from "react";
import { act as ReactTestUtilsAct } from "react-dom/test-utils";
import { act as ReactTestRendererAct } from "react-test-renderer";

You can add more methods if they're imported from somewhere by passing a JS file that only includes imports of those methods e.g. npx codemod-missing-await-act ./src --import-config ./my-testing-library-imports.js where my-testing-library-imports.js contains

import { renderWithProviders } from "@mycompany/testing-library";

Now the codemod will also add an await to any renderWithProviders call imported from @mycompany/testing-library.

By default, the codemod uses the code listed in codemod-missing-await/default-import-config.js.

Getting started

$ npx codemod-missing-await-act ./src
Processing 4 files...
All done.
Results:
0 errors
3 unmodified
0 skipped
1 ok
Time elapsed: 0.428seconds

Usage

$ npx codemod-missing-await-act

codemod-missing-await-act <paths...>

Positionals:
  paths                                                      [string] [required]

Options:
  --version         Show version number                                [boolean]
  --help            Show help                                          [boolean]
  --dry                                               [boolean] [default: false]
  --ignore-pattern                      [string] [default: "**/node_modules/**"]
  --import-config   A path to a JS file importing all methods whose calls should
                    be awaited.                                         [string]
  --verbose                                           [boolean] [default: false]

Examples:
  codemod-missing-await-act ./              Ignores `node_modules` and `build`
  --ignore-pattern                          folders
  "**/{node_modules,build}/**"
  codemod-missing-await-act ./              Adds await to to all calls of
  --import-confg                            methods imported in that file.
  ./missing-await-import-config.js

Limitations

Forces call expressions to be awaited

const acting = act(scope);
await anotherPromise;
await acting;

will add await to the act call.

This codemod is targetted at act calls. They're not allowed to be interleaved anyway so the original code was already problematic since it could also contain an act call. I don't think this is common in practice (TODO: check if we use this pattern).

async class methods are not propagated

We don't track references to class methods. Only references to (arrow-) function declarations or expressions are tracked.

class MyTestUtils {
	render() {
		act(scope);
	}
}

const utils = new MyTestUtils();

utils.render();

will be transformed to

class MyTestUtils {
	async render() {
		await act(scope);
	}
}

const utils = new MyTestUtils();

// no `await` added
utils.render();

Supported platforms

The following list contains officially supported runtimes. Please file an issue for runtimes that are not included in this list.

  • Node.js 14.x || 16.x || 18.x || 19.x || 20.x