Question 74208 in Reactjs Question posted in
The new location for the React Documentation can be found here.

What should I test on my frontend? (React Typescript) – Noob Question – Reactjs

I am a new dev and have never tested frontend functionality that doesn’t relate to the backend. I have seen many questions about this yet none of the responses read clearly to me. I have a React.ts/.NET project and am curious about frontend testing.

What types of functions should be tested? I know anything related to connecting to the backend should be tested, but what else? UI functions such as toggling visibility, component returns, state, state altering functions, etc?

I am building a website for somebody and want to follow all of the best practices but am struggling to find a consensus on this that is in plain English.

Tags:

2

Answers


  1. 0

    It’s great that you’re thinking about testing as part of your development process. Testing is an important aspect of software development that helps ensure that your code works as intended and catches issues before they reach production.

    In terms of what to test in a React.ts/.NET project, here are some general guidelines:

    • Test all business logic functions: This includes functions that
      manipulate data, perform calculations, or implement business rules.
      These functions are critical to the functioning of your application,
      so it’s important to test them thoroughly to ensure they work as
      expected.

    • Test all UI functions: This includes functions that handle user
      interactions, such as toggling visibility, button clicks, etc. These
      functions are also critical to the functioning of your application
      and can impact the user experience, so it’s important to test them
      thoroughly as well.

    • Test all state-related functions: This includes functions that alter
      state, such as setState() or useReducer(). Testing these functions
      will help ensure that your application state is being updated
      correctly and that your components are re-rendering as expected.

    • Test all component returns: This includes functions that return JSX
      code. Testing these functions will help ensure that the correct HTML
      is being rendered and that your components are functioning as
      expected.

    • Test all component lifecycles: This includes functions like
      componentDidMount() and componentWillUnmount(). Testing these
      functions will help ensure that your components are mounting and
      unmounting correctly.

    • Test all edge cases: This includes testing your code in scenarios
      that may not occur often, such as error conditions or unexpected user
      input. By testing edge cases, you can catch potential issues before
      they become a problem for your users.

    When it comes to testing, there are different types of tests that you can use, such as unit tests, integration tests, and end-to-end tests. In general, it’s a good idea to start with unit tests, which test individual functions in isolation. This can help you catch issues early in the development process and make it easier to identify the root cause of any issues that arise.

    In terms of tools for testing React.ts/.NET applications, there are several popular frameworks to choose from, such as Jest, React Testing Library, and Enzyme. These frameworks provide tools for writing and running tests, as well as utilities for testing React components.

    Overall, testing is an important part of building reliable and maintainable software, and it’s great that you’re looking to incorporate it into your development process. With a little practice, you’ll soon find that testing becomes an integral part of your development workflow, helping you catch issues early and ensure a high-quality user experience.

    Login or Signup to reply.
  2. 0

    if you are referring testing the components of your react-app, it’s really straight forward (obviously you could have really extensive test for components) but if you are a beginner and you only want to test your components in a way that they don’t break, then you could go for jest.

    This is a personal option as well and this is mainly what I have been using as a react developer, I will put a really simple example (as shown in the docs page of jest) of how you can test a simple component (you can call it Link.js):

    import {useState} from 'react';

const STATUS = {
  HOVERED: 'hovered',
  NORMAL: 'normal',
};

export default function Link({page, children}) {
  const [status, setStatus] = useState(STATUS.NORMAL);

  const onMouseEnter = () => {
    setStatus(STATUS.HOVERED);
  };

  const onMouseLeave = () => {
    setStatus(STATUS.NORMAL);
  };

  return (
    <a
      className={status}
      href={page || '#'}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      {children}
    </a>
  );
}

    And of course I want to build some test-cases for this component, so I’ll use jest, I can test multiple things as when the component re-renders, the hover event, when the mouse enter, when the mouse leave the component and you have a extensive documentation as well here jest docs for react:

    import renderer from 'react-test-renderer';
import Link from '../Link';

it('changes the class when hovered', () => {
  const component = renderer.create(
    <Link page="http://www.facebook.com">Facebook</Link>,
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();

  // manually trigger the callback
  renderer.act(() => {
    tree.props.onMouseEnter();
  });
  // re-rendering
  tree = component.toJSON();
  expect(tree).toMatchSnapshot();

  // manually trigger the callback
  renderer.act(() => {
    tree.props.onMouseLeave();
  });
  // re-rendering
  tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search