Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[tests] add assertConsole<method>Dev helpers #28732

Merged
merged 7 commits into from Apr 11, 2024

Conversation

rickhanlonii
Copy link
Member

@rickhanlonii rickhanlonii commented Apr 3, 2024

Overview

Internal React repo tests only

Depends on #28710

Adds three new assertions:

  • assertConsoleLogDev
  • assertConsoleWarnDev
  • assertConsoleErrorDev

These will replace this pattern:

await expect(async () => {
  await expect(async () => {
    await act(() => {
      root.render(<Fail />)
    });
  }).toThrow();
}).toWarnDev('Warning');

With this:

await expect(async () => {
  await act(() => {
    root.render(<Fail />)
  });
}).toThrow();

assertConsoleWarnDev('Warning');

It works similar to our other assertLog matchers which clear the log and assert on it, failing the tests if the log is not asserted before the test ends.

Diffs

There are a few improvements I also added including better log diffs and more logging.

When there's a failure, the output will look something like:

Screenshot 2024-04-03 at 11 50 08 AM

Check out the test suite for snapshots of all the failures we may log.

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Apr 3, 2024
@react-sizebot
Copy link

react-sizebot commented Apr 3, 2024

Comparing: da69b6a...9822c22

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js = 168.76 kB 168.76 kB = 52.91 kB 52.91 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 170.57 kB 170.57 kB = 53.44 kB 53.44 kB
facebook-www/ReactDOM-prod.classic.js = 590.38 kB 590.38 kB = 103.83 kB 103.83 kB
facebook-www/ReactDOM-prod.modern.js = 566.20 kB 566.20 kB = 100.02 kB 100.02 kB
oss-experimental/jest-react/cjs/jest-react.production.min.js +5.24% 1.39 kB 1.47 kB +5.58% 0.77 kB 0.81 kB
oss-stable-semver/jest-react/cjs/jest-react.production.min.js +5.24% 1.39 kB 1.47 kB +5.58% 0.77 kB 0.81 kB
oss-stable/jest-react/cjs/jest-react.production.min.js +5.24% 1.39 kB 1.47 kB +5.58% 0.77 kB 0.81 kB
oss-experimental/jest-react/cjs/jest-react.production.js +4.06% 3.96 kB 4.12 kB +4.57% 1.40 kB 1.47 kB
oss-stable-semver/jest-react/cjs/jest-react.production.js +4.06% 3.96 kB 4.12 kB +4.57% 1.40 kB 1.47 kB
oss-stable/jest-react/cjs/jest-react.production.js +4.06% 3.96 kB 4.12 kB +4.57% 1.40 kB 1.47 kB
oss-experimental/jest-react/cjs/jest-react.development.js +3.74% 4.20 kB 4.36 kB +4.33% 1.50 kB 1.57 kB
oss-stable-semver/jest-react/cjs/jest-react.development.js +3.74% 4.20 kB 4.36 kB +4.33% 1.50 kB 1.57 kB
oss-stable/jest-react/cjs/jest-react.development.js +3.74% 4.20 kB 4.36 kB +4.33% 1.50 kB 1.57 kB
test_utils/ReactAllWarnings.js Deleted 64.44 kB 0.00 kB Deleted 16.10 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/jest-react/cjs/jest-react.production.min.js +5.24% 1.39 kB 1.47 kB +5.58% 0.77 kB 0.81 kB
oss-stable-semver/jest-react/cjs/jest-react.production.min.js +5.24% 1.39 kB 1.47 kB +5.58% 0.77 kB 0.81 kB
oss-stable/jest-react/cjs/jest-react.production.min.js +5.24% 1.39 kB 1.47 kB +5.58% 0.77 kB 0.81 kB
oss-experimental/jest-react/cjs/jest-react.production.js +4.06% 3.96 kB 4.12 kB +4.57% 1.40 kB 1.47 kB
oss-stable-semver/jest-react/cjs/jest-react.production.js +4.06% 3.96 kB 4.12 kB +4.57% 1.40 kB 1.47 kB
oss-stable/jest-react/cjs/jest-react.production.js +4.06% 3.96 kB 4.12 kB +4.57% 1.40 kB 1.47 kB
oss-experimental/jest-react/cjs/jest-react.development.js +3.74% 4.20 kB 4.36 kB +4.33% 1.50 kB 1.57 kB
oss-stable-semver/jest-react/cjs/jest-react.development.js +3.74% 4.20 kB 4.36 kB +4.33% 1.50 kB 1.57 kB
oss-stable/jest-react/cjs/jest-react.development.js +3.74% 4.20 kB 4.36 kB +4.33% 1.50 kB 1.57 kB
test_utils/ReactAllWarnings.js Deleted 64.44 kB 0.00 kB Deleted 16.10 kB 0.00 kB

Generated by 🚫 dangerJS against 9822c22

@acdlite
Copy link
Collaborator

acdlite commented Apr 3, 2024

Could you maybe put the word "console" in the name of the method? That way assertLogDev and assertLog are more different. (Arguably the existing assertLog should have "Scheduler" in it too but since it's the most common one I think it's fine.)

@rickhanlonii rickhanlonii force-pushed the rh/assert-log-dev branch 4 times, most recently from ac17a2a to 463900a Compare April 3, 2024 20:03
@rickhanlonii rickhanlonii changed the title [tests] add assertLogDev, assertWarnDev, assertErrorDev [tests] add assertConsole<method>Dev helpers Apr 3, 2024
@rickhanlonii
Copy link
Member Author

@acdlite done

And I fixed the jest.resetModules() thing so this is good to review

@eps1lon
Copy link
Collaborator

eps1lon commented Apr 3, 2024

Are the diffs the same in case of assertion failure? Feels like these are way better now. And finally some tests for these matchers 🥳

Maybe as a follow-up, we can check before calling act, toMatchRenderedOutput and any other custom matcher if there are any unasserted console.* calls to enforce more granular assertions like toErrorDev ensured? That's how understood @acdlite's comment about how toMatchRenderedOutput already works today with regard to Scheduler.log. Extending assertYieldsWereCleared to also check console.* calls were cleared is probably good enough.

@rickhanlonii
Copy link
Member Author

@eps1lon yeah, definitely, I just can't land that yet because it would break all the toWarnDev matchers wouldn't it?

@rickhanlonii
Copy link
Member Author

Actually, it won't because the toWarnDev matchers mock the console separately. I'll add this to check to act 👍

Separately though, we need to add the check to act for the scheduler, because we're not asserting it outside of the Noop renderer: #28737

@rickhanlonii
Copy link
Member Author

@eps1lon pushed

@eps1lon
Copy link
Collaborator

eps1lon commented Apr 4, 2024

What about toMatchRenderedOutput and friends i.e. everywhere we call assertYieldsWereCleared? Does that require codemodding away toWarnDev first?

@rickhanlonii
Copy link
Member Author

@eps1lon added!

Copy link
Collaborator

@eps1lon eps1lon left a comment

Choose a reason for hiding this comment

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

Love it.

@@ -35,6 +35,7 @@ function toMatchRenderedOutput(ReactNoop, expectedJSX) {
if (typeof ReactNoop.getChildrenAsJSX === 'function') {
const Scheduler = ReactNoop._Scheduler;
assertYieldsWereCleared(Scheduler, toMatchRenderedOutput);
assertConsoleLogsCleared();
Copy link
Collaborator

Choose a reason for hiding this comment

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

nit: Should probably move this into assertYieldsWereCleared for parity with assertYieldsWereCleared in ReactInternalTestUtils.


Hi Foo
Wow Bar
- Yikes Faz
Copy link
Collaborator

Choose a reason for hiding this comment

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

Shouldn't this include the newlines?

Copy link
Member Author

Choose a reason for hiding this comment

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

No, I strip the new lines to make the diffs better, otherwise they could get really fucky and useless

@@ -301,3 +307,2079 @@ describe('ReactInternalTestUtils console mocks', () => {
});
});
});

// Helper method to capture assertion failure.
const expectToWarnAndToThrow = expectBlock => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Why the mention of warnings here? Isn't expectToThrow sufficient? Same question for awaitExpectToWarnAndToThrow

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah I'll rename, I copied these helpers from the toWarnDev helpers

Copy link
Member Author

Choose a reason for hiding this comment

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

Renamed to expectToThrowFailure since it does the ansi stripping for the test failure

console.warn('Hello\n in div');
console.warn('Good day');
console.warn('Bye\n in div');
assertConsoleWarnDev(['Hello', 'Good day', 'Bye'], {withoutStack: 1});
Copy link
Collaborator

Choose a reason for hiding this comment

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

How about this instead:

assertConsoleWarnDev([
  'Hello',
  ['Good day', {withoutStack: true}],
  'Bye',
]);

Copy link
Member Author

Choose a reason for hiding this comment

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

Love it, will do

@rickhanlonii
Copy link
Member Author

@acdlite updated, you can now pass either of these:

// Global option, no logs have stacks
assertConsoleWarnDev(['Hi', 'Bye'], {withoutStack: true})

// Local option, specific logs missing stacks
assertConsoleWarnDev([['Hi', {withoutStack: true}], 'Bye'])

I dropped support for {withoutStack: number} which will make it harder to migrate, but will be better.

@rickhanlonii rickhanlonii merged commit 608edcc into facebook:main Apr 11, 2024
38 checks passed
@rickhanlonii rickhanlonii deleted the rh/assert-log-dev branch April 11, 2024 12:19
rickhanlonii added a commit that referenced this pull request Apr 11, 2024
## Overview
**Internal React repo tests only**

Depends on #28710

Adds three new assertions:
- `assertConsoleLogDev`
- `assertConsoleWarnDev`
- `assertConsoleErrorDev`

These will replace this pattern:

```js
await expect(async () => {
  await expect(async () => {
    await act(() => {
      root.render(<Fail />)
    });
  }).toThrow();
}).toWarnDev('Warning');
```

With this:

```js
await expect(async () => {
  await act(() => {
    root.render(<Fail />)
  });
}).toThrow();

assertConsoleWarnDev('Warning');
```

It works similar to our other `assertLog` matchers which clear the log
and assert on it, failing the tests if the log is not asserted before
the test ends.

## Diffs

There are a few improvements I also added including better log diffs and
more logging.

When there's a failure, the output will look something like:

<img width="655" alt="Screenshot 2024-04-03 at 11 50 08 AM"
src="https://github.com/facebook/react/assets/2440089/0c4bf1b2-5f63-4204-8af3-09e0c2d752ad">


Check out the test suite for snapshots of all the failures we may log.
rickhanlonii added a commit that referenced this pull request Apr 11, 2024
## Overview
**Internal React repo tests only**

Depends on #28710

Adds three new assertions:
- `assertConsoleLogDev`
- `assertConsoleWarnDev`
- `assertConsoleErrorDev`

These will replace this pattern:

```js
await expect(async () => {
  await expect(async () => {
    await act(() => {
      root.render(<Fail />)
    });
  }).toThrow();
}).toWarnDev('Warning');
```

With this:

```js
await expect(async () => {
  await act(() => {
    root.render(<Fail />)
  });
}).toThrow();

assertConsoleWarnDev('Warning');
```

It works similar to our other `assertLog` matchers which clear the log
and assert on it, failing the tests if the log is not asserted before
the test ends.

## Diffs

There are a few improvements I also added including better log diffs and
more logging.

When there's a failure, the output will look something like:

<img width="655" alt="Screenshot 2024-04-03 at 11 50 08 AM"
src="https://github.com/facebook/react/assets/2440089/0c4bf1b2-5f63-4204-8af3-09e0c2d752ad">


Check out the test suite for snapshots of all the failures we may log.
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
## Overview
**Internal React repo tests only**

Depends on facebook#28710

Adds three new assertions:
- `assertConsoleLogDev`
- `assertConsoleWarnDev`
- `assertConsoleErrorDev`

These will replace this pattern:

```js
await expect(async () => {
  await expect(async () => {
    await act(() => {
      root.render(<Fail />)
    });
  }).toThrow();
}).toWarnDev('Warning');
```

With this:

```js
await expect(async () => {
  await act(() => {
    root.render(<Fail />)
  });
}).toThrow();

assertConsoleWarnDev('Warning');
```

It works similar to our other `assertLog` matchers which clear the log
and assert on it, failing the tests if the log is not asserted before
the test ends.

## Diffs

There are a few improvements I also added including better log diffs and
more logging.

When there's a failure, the output will look something like:

<img width="655" alt="Screenshot 2024-04-03 at 11 50 08 AM"
src="https://github.com/facebook/react/assets/2440089/0c4bf1b2-5f63-4204-8af3-09e0c2d752ad">


Check out the test suite for snapshots of all the failures we may log.
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Apr 19, 2024
Summary:
This sync includes the changes from:
- D56103750
- [TODO] A shim for SECRET_INTERNALS

This sync includes the following changes:
- **[b5e5ce8e0](facebook/react@b5e5ce8e0 )**: Update ReactNativeTypes for root options (part 2) ([#28857](facebook/react#28857)) //<Ricky>//
- **[da6ba53b1](facebook/react@da6ba53b1 )**: [UMD] Remove umd builds ([#28735](facebook/react#28735)) //<Josh Story>//
- **[0c245df1d](facebook/react@0c245df1d )**: Complete the typo fix ([#28856](facebook/react#28856)) //<Sebastian Silbermann>//
- **[f82051d7a](facebook/react@f82051d7a )**: console test utils fix: match entire string, not just first letter ([#28855](facebook/react#28855)) //<Andrew Clark>//
- **[4ca20fd36](facebook/react@4ca20fd36 )**: Test top level fragment inside lazy semantics ([#28852](facebook/react#28852)) //<Sebastian Markbåge>//
- **[c0cf7c696](facebook/react@c0cf7c696 )**: Promote ASYNC_ITERATOR symbol to React Symbols ([#28851](facebook/react#28851)) //<Sebastian Markbåge>//
- **[657428a9e](facebook/react@657428a9e )**: Add ReactNativeTypes for root options ([#28850](facebook/react#28850)) //<Ricky>//
- **[7909d8eab](facebook/react@7909d8eab )**: [Flight] Encode ReadableStream and AsyncIterables ([#28847](facebook/react#28847)) //<Sebastian Markbåge>//
- **[13eb61d05](facebook/react@13eb61d05 )**: Move enableUseDeferredValueInitialArg to canary ([#28818](facebook/react#28818)) //<Andrew Clark>//
- **[8afa144bd](facebook/react@8afa144bd )**: Enable flag disableClientCache ([#28846](facebook/react#28846)) //<Jan Kassens>//
- **[734956ace](facebook/react@734956ace )**: Devtools: Add support for useFormStatus ([#28413](facebook/react#28413)) //<Sebastian Silbermann>//
- **[17e920c00](facebook/react@17e920c00 )**: [Flight Reply] Encode Typed Arrays and Blobs ([#28819](facebook/react#28819)) //<Sebastian Markbåge>//
- **[0347fcd00](facebook/react@0347fcd00 )**: Add on(Caught|Uncaught|Recoverable) opts to RN ([#28836](facebook/react#28836)) //<Ricky>//
- **[c113503ad](facebook/react@c113503ad )**: Flush direct streams in Bun ([#28837](facebook/react#28837)) //<Kenta Iwasaki>//
- **[9defcd56b](facebook/react@9defcd56b )**: Remove redundant props assign ([#28829](facebook/react#28829)) //<Sebastian Silbermann>//
- **[ed4023603](facebook/react@ed4023603 )**: Fix mistaken "react-server" condition ([#28835](facebook/react#28835)) //<Sebastian Markbåge>//
- **[c8a035036](facebook/react@c8a035036 )**: [Fizz] hoistables should never flush before the preamble ([#28802](facebook/react#28802)) //<Josh Story>//
- **[4f5c812a3](facebook/react@4f5c812a3 )**: DevTools: Rely on sourcemaps to compute hook name of built-in hooks in newer versions ([#28593](facebook/react#28593)) //<Sebastian Silbermann>//
- **[435415962](facebook/react@435415962 )**: Backwards compatibility for string refs on WWW ([#28826](facebook/react#28826)) //<Jack Pope>//
- **[608edcc90](facebook/react@608edcc90 )**: [tests] add `assertConsole<method>Dev` helpers ([#28732](facebook/react#28732)) //<Ricky>//
- **[da69b6af9](facebook/react@da69b6af9 )**: ReactDOM.requestFormReset  ([#28809](facebook/react#28809)) //<Andrew Clark>//
- **[374b5d26c](facebook/react@374b5d26c )**: Scaffolding for requestFormReset API ([#28808](facebook/react#28808)) //<Andrew Clark>//
- **[41950d14a](facebook/react@41950d14a )**: Automatically reset forms after action finishes ([#28804](facebook/react#28804)) //<Andrew Clark>//
- **[dc6a7e01e](facebook/react@dc6a7e01e )**: [Float] Don't preload images inside `<noscript>` ([#28815](facebook/react#28815)) //<Josh Story>//
- **[3f947b1b4](facebook/react@3f947b1b4 )**: [tests] Assert scheduler log empty in internalAct ([#28737](facebook/react#28737)) //<Ricky>//
- **[bf09089f6](facebook/react@bf09089f6 )**: Remove Scheduler.log from ReactSuspenseFuzz-test ([#28812](facebook/react#28812)) //<Ricky>//
- **[84cb3b4cb](facebook/react@84cb3b4cb )**: Hardcode disableIEWorkarounds for www ([#28811](facebook/react#28811)) //<Ricky>//
- **[2243b40ab](facebook/react@2243b40ab )**: [tests] assertLog before act in useEffectEvent ([#28763](facebook/react#28763)) //<Ricky>//
- **[dfc64c6e3](facebook/react@dfc64c6e3 )**: [tests] assertLog before act in ReactUse ([#28762](facebook/react#28762)) //<Ricky>//
- **[42eff4bc7](facebook/react@42eff4bc7 )**: [tests] Fix assertions not flushed before act ([#28745](facebook/react#28745)) //<Ricky>//
- **[ed3c65caf](facebook/react@ed3c65caf )**: Warn if outdated JSX transform is detected ([#28781](facebook/react#28781)) //<Andrew Clark>//
- **[3f9e237a2](facebook/react@3f9e237a2 )**: Fix: Suspend while recovering from hydration error ([#28800](facebook/react#28800)) //<Andrew Clark>//
- **[7f5d25e23](facebook/react@7f5d25e23 )**: Fix cloneElement using string ref w no owner ([#28797](facebook/react#28797)) //<Joseph Savona>//
- **[bf40b0244](facebook/react@bf40b0244 )**: [Fizz] Stop publishing external-runtime to stable channel ([#28796](facebook/react#28796)) //<Josh Story>//
- **[7f93cb41c](facebook/react@7f93cb41c )**: [DOM] Infer react-server entries bundles if not explicitly configured ([#28795](facebook/react#28795)) //<Josh Story>//
- **[f61316535](facebook/react@f61316535 )**: Rename SECRET INTERNALS to `__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE` ([#28789](facebook/react#28789)) //<Sebastian Markbåge>//
- **[9644d206e](facebook/react@9644d206e )**: Soften useFormState warning ([#28788](facebook/react#28788)) //<Ricky>//
- **[c771016e1](facebook/react@c771016e1 )**: Rename The Secret Export of Server Internals ([#28786](facebook/react#28786)) //<Sebastian Markbåge>//
- **[d50323eb8](facebook/react@d50323eb8 )**: Flatten ReactSharedInternals ([#28783](facebook/react#28783)) //<Sebastian Markbåge>//
- **[f62cf8c62](facebook/react@f62cf8c62 )**: [Float] treat `props.async` in Float consistent with the rest of react-dom ([#26760](facebook/react#26760)) //<Josh Story>//
- **[dfd3d5af8](facebook/react@dfd3d5af8 )**: Add support for transition{run,start,cancel} events ([#27345](facebook/react#27345)) //<Hugo Sales>//
- **[1f8327f83](facebook/react@1f8327f83 )**: [Fiber] Use real event priority for hydration scheduling ([#28765](facebook/react#28765)) //<Josh Story>//
- **[97c90ed88](facebook/react@97c90ed88 )**: [DOM] Shrink ReactDOMCurrentDispatcher method names ([#28770](facebook/react#28770)) //<Josh Story>//
- **[9007fdc8f](facebook/react@9007fdc8f )**: [DOM] Shrink ReactDOMSharedInternals source representation ([#28771](facebook/react#28771)) //<Josh Story>//
- **[14f50ad15](facebook/react@14f50ad15 )**: [Flight] Allow lazily resolving outlined models ([#28780](facebook/react#28780)) //<Sebastian Markbåge>//
- **[4c12339ce](facebook/react@4c12339ce )**: [DOM] move `flushSync` out of the reconciler ([#28500](facebook/react#28500)) //<Josh Story>//
- **[8e1462e8c](facebook/react@8e1462e8c )**: [Fiber] Move updatePriority tracking to renderers ([#28751](facebook/react#28751)) //<Josh Story>//
- **[0b3b8a6a3](facebook/react@0b3b8a6a3 )**: jsx: Remove unnecessary hasOwnProperty check ([#28775](facebook/react#28775)) //<Andrew Clark>//
- **[2acfb7b60](facebook/react@2acfb7b60 )**: [Flight] Support FormData from Server to Client ([#28754](facebook/react#28754)) //<Sebastian Markbåge>//
- **[d1547defe](facebook/react@d1547defe )**: Fast JSX: Don't clone props object ([#28768](facebook/react#28768)) //<Andrew Clark>//
- **[bfd8da807](facebook/react@bfd8da807 )**: Make class prop resolution faster ([#28766](facebook/react#28766)) //<Andrew Clark>//
- **[cbb6f2b54](facebook/react@cbb6f2b54 )**: [Flight] Support Blobs from Server to Client ([#28755](facebook/react#28755)) //<Sebastian Markbåge>//
- **[f33a6b69c](facebook/react@f33a6b69c )**: Track Owner for Server Components in DEV ([#28753](facebook/react#28753)) //<Sebastian Markbåge>//
- **[e3ebcd54b](facebook/react@e3ebcd54b )**: Move string ref coercion to JSX runtime ([#28473](facebook/react#28473)) //<Andrew Clark>//
- **[fd0da3eef](facebook/react@fd0da3eef )**: Remove _owner field from JSX elements in prod if string refs are disabled ([#28739](facebook/react#28739)) //<Sebastian Markbåge>//

Changelog:
[General][Changed] - React Native sync for revisions 48b4ecc...b5e5ce8

jest_e2e[run_all_tests]
bypass-github-export-checks

Reviewed By: kassens

Differential Revision: D56251607

fbshipit-source-id: e16db2fa101fc7ed1e009158c76388206beabd5f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants