Line numbers in component stack of act warning in 16.9

[danielkcz]

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

When act is missing in a test, the warning contains information about the component tree (see image below; without stack trace), but in a test file which might include the same components several times over it does not help finding the culprit.

Furthermore, the warning does not fail a test (not a problem) and as such it's shown at the end of test run output (at least in case of Jest) so there is no colocation with test having a problem.

What is the expected behavior?

We have used a somewhat ugly hack that allows us to see the full stack trace and the originating line of failure in actual test file is there, although buried rather deeply.

Error.stackTraceLimit = Infinity
const origError = console.error
console.error = function(msg) {
    if (/react-wrap-tests-with-act/.test("" + msg)) throw new Error("missing act")
    return origError.apply(this, arguments)
}

I have tweaked it a bit in the following Sandbox and I am able to extract the exact location of a failure (notice the console output). It's slightly off due to lack of source maps, but in a proper environment, it's really helpful.

Not to be confused, this is output AFTER my modification

Currently, the output is without a stack trace

So I wonder why not include something like that in React?

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Everything is 16.9

[gaearon]

Do you want to file an issue with Jest to ask to append stack traces to console.error calls? It sounds like that’s what you’re asking. I don’t know why React warnings should be treated specially. The problem seems universal to Jest.

[gaearon]

The issue title is a little confusing to me.

The text says you’re struggling with the determining the cause of the warning and that there’s no JS stack trace. That sounds like a Jest issue that can be fixed on their side.

But the title phrasing (“unhelpful warning persists”) sounds like you expected the warning not to fire.

Can you please clarify if there’s still anything unexpected here? Beyond Jest not showing a JS stack trace.

[danielkcz]

Sorry for the confusion. Feel free to change the title that makes more sense to you... I hope it's better like that.

By "unhelpful" I mean it doesn't help much with locating problematic test.

By "still persists" I mean that this hasn't changed since 16.8 and I got inspired by a subject of previous issue #14769.

Lastly, I don't think this is a problem of Jest. The "act warning" is originating in React and it's logged with console.error. It's just a text, not a hard error. I don't think that all warnings are that important to see stack traces for all of them. Especially considering warnings about deprecating something, it would pollute the test output instead of being helpful.

And the important fact is that I had to filter out that stack trace, otherwise the originating location is like 20th+ frame in that stack trace. See the output for a reference. Definitely lowers the effectivity when you need to filter that with eyes.

To clarify, that image in the OP is AFTER my modification, it doesn't work like that currently.

[danielkcz]

New day, new brains and I realized what CodeSandbox is showing is not accurate as the console output differs when running locally.

Jest is showing the line number of console.X by default, but in the case of "act warning" it points to React code as the origin of the console.error call.

[email protected] [email protected] [email protected] [email protected]

However, what is really strange, when running the same test through CRA 3, the output is different and much more useful.

[email protected] [email protected] [email protected] [email protected] [email protected]

This has obviously nothing to do with Jest as that output is produced by React.

[gaearon]

The component stack is more useful in CRA because it enables this plugin in development and tests. We recommend using it (just don't enable it in prod!) so that should solve your issue.

[danielkcz]

@gaearon Well, I would argue that's not very DX friendly. Since the warning is originating from React, it should be handled in React and not expect users to configure plugin if they don't use CRA. Otherwise, that warning makes it fairly hard to pinpoint a problem.

And what about TypeScript users or generally people who don't use Babel?

It's not even documented anywhere. There should be some mention of it on that link http://fb.me/react-wrap-tests-with-act

[danielkcz]

@gaearon Another example of how confusing it can be when there is no stack trace for that warning by default.

https://spectrum.chat/testing-library/help-react/act-warning~be946bdd-b2c4-4bf5-bf4d-e4a1f01d1914

I don't think it's fair to close this issue without giving it a second thought.