Minified React error #310; use the non-minified dev environment for full errors and additional helpful warnings using Chrome through Selenium in React

Question

I am new to automated testing. I am using Selenium/Java/Cucumber/Eclipse to create a test framework and write/execute automated test scripts.

Previous scripts that ran correctly are now failing on a specific web page.

During the test execution a specific page loads and then goes blank.

Looking at the Chrome console output I am seeing the following error:

Error: Minified React error #310; visit https://reactjs.org/docs/error-decoder.html?invariant=310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings

This issue also occurs on the same screen when the test is executed on Firefox.

I do not see this error if I manually click through to the screen that is failing in the automated test.

Has any one seen this issue before when running selenium automated tests?

Tests are being run on a live website so I cannot adjust the application code. I am only using this website for practising test automation scripting.

Is there any way I can avoid or handle this issue using selenium commands?

Answer 1

This error message...

"Error: Minified React error #310; visit https://reactjs.org/docs/error-decoder.html?invariant=310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings"

...implies that you are using the minified production build of React which avoids sending down full error messages in order to reduce the number of bytes sent over the wire.

---

Analysis

As per the documentation in Error Decoder it is highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original text of the error.

However, the full text of the error you just encountered is:

Rendered more hooks than during the previous render.

---

Solution

Hooks are JavaScript functions. React requires hooks to be called in the same order with every render. You need to follow two rules when using them as follows:

• Only Call Hooks at the Top Level: Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

• Only Call Hooks from React Functions: Don’t call Hooks from regular JavaScript functions. Instead, you can:

  • Call Hooks from React function components.
  • Call Hooks from custom Hooks (we’ll learn about them on the next page).

By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.

---

References

You can find a couple of relevant discussions in:

• Uncaught Invariant Violation: Rendered more hooks than during the previous render
• Rendered more hooks than during the previous render. when posting form data with React Hooks
• Rendered more hooks than during the previous render
• "Rendered more hooks than during the previous render" error when the initial value for the hook is a query result from a database

---

tl; dr

How to fix React Error: Rendered fewer hooks than expected