Home / Questions / 14040
Accepted
fredyfx
Asked: 2020-06-16 07:38:45 +0800 CST 2020-06-16 07:38:45 +0800 CST

How to perform good debugging and unit testing in ReactJS? [closed]

  • 772

Recently I was curious and I would like your support to solve this question: ReactJSComponents are created in components, and so far, everything is fine, however when the logic to be developed is added... How to make a good depuración? And when it needs to be done pruebas unitarias, how to test it?

Here an example ofReactJS

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
  <div id="example"></div>
  <script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
  </script>
  </body>
</html>
javascript

1 Answers

  1. Best Answer

    Part of React's best practice is to isolate the operation of its components.

    When we talk about logic, it is common for it to involve the use of several components, and this is when debugging and maintaining the code can get complicated.

    React's philosophy dictates that it's just the V of MVC, so in theory you could apply any architecture and development pattern. Based on this we take the following considerations.

    1. A React component should not have logic as such, it should only receive the data it should display, remember that it is only the view.
    2. A component should function in isolation and should not know information or "talk" directly to another component.

    Now, there are architectures that work especially well with React, such as Flux , which by having unidirectional data flows, allow handling the concept of components very well, since the component only receives the data that it must display, as I named it before.

    Regarding unit tests:

    Since each component must work in isolation, there are great tools to test them like React Storybook

    To run tests in theory it should be the same as the rest of the unit tests, for example you can design them based on the Storybook, and run them individually, so you detect errors in the specific component and the workflow would be faster.

    Update: I found Crypress , it looks very good for testing, it seems to be based on the component philosophy.

    • 2