Skip to content

Conversation

@sydneyjodon-wk
Copy link
Contributor

@sydneyjodon-wk sydneyjodon-wk commented Jun 4, 2025

Motivation

We should expose the act API from React (https://react.dev/reference/react/act)

act is a test helper to apply pending React updates before making assertions.

While most cases are handled by RTL, whose APIs such as UserEvent and fireEvent are wrapped in act:

You might find using act() directly a bit too verbose. To avoid some of the boilerplate, you could use a library like React Testing Library, whose helpers are wrapped with act().

...there are some cases, like testing component imperative API calls, or dispatching actions directly, in which act may be a good fit.

Changes

  • Expose act in dart
  • add tests

Release Notes

Review

See CONTRIBUTING.md for more details on review types (+1 / QA +1 / +10) and code review process.

QA Checklist

  • Tests were updated and provide good coverage of the changeset and other affected code
  • Manual testing was performed if needed

Merge Checklist

While we perform many automated checks before auto-merging, some manual checks are needed:

  • A Frontend Frameworks Design member has reviewed these changes
  • There are no unaddressed comments - this check can be automated if reviewers use the "Request Changes" feature
  • For release PRs - Version metadata in Rosie comment is correct

@sydneyjodon-wk sydneyjodon-wk marked this pull request as ready for review June 4, 2025 22:39
Copy link
Contributor

@greglittlefield-wf greglittlefield-wf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a couple additional test cases I thought would be good to add, otherwise this looks great!


await rtl.act(asyncCallback);
expect(useEffectCalls, 2);
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we also add some tests that verify that any errors in the callback successfully propagate, both for sync and async callbacks?

That way
a) we'll verify that the errors aren't swallowed and
b) we'll know whether anything weird happens to Dart exceptions in the JS interop that might require throwErrorFromJS or something).

Could do something like this (I stumbled across that when looking through code trying to remember the name of throwErrorFromJS):

expect(() => rtl.waitFor(() => throw ExceptionForTesting(), container: view.container),
throwsA(isA<ExceptionForTesting>()));

Copy link
Contributor

@greglittlefield-wf greglittlefield-wf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code LGTM, but I just remembered 🤦, this repo is set up to auto-release/publish now on merge.

Would you mind updating the changelog for 3.1.0 with this addition? And if you wouldn't mind, filling in 3.0.3/3.0.4 too while you're in there? 😅

Copy link
Contributor

@greglittlefield-wf greglittlefield-wf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for updating the changelog!

+10

@Workiva/release-management-p

Copy link

@rmconsole-wf rmconsole-wf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 from RM

@btr-rmconsole-7 btr-rmconsole-7 bot merged commit 422ba6c into master Jun 5, 2025
14 checks passed
@btr-rmconsole-7 btr-rmconsole-7 bot deleted the expose-act branch June 5, 2025 16:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants