Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

How to test functions inside functional component and also using hooks values

Ouverte
  • Quelque chose ne va pas ?
#1,382 1 commentaire 1 réaction 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
25/100
Type d'issue
Documentation
Clarté
À clarifier
Activité
À l'abandon
Stack technique
react, typescript
Domaine
frontend, testing

Piste de recherche

L’exemple se trouve dans Employee.tsx et fait référence à useEmployeeDetails, useEmployeeData et useCleanData, mais aucun test du repository ni chemin source n’est indiqué. Commencez par localiser ces hooks et le composant Employee, puis déterminez le comportement visible par l’utilisateur déclenché par le bouton de mise à jour. Un résultat attendu concret et l’emplacement du test sont nécessaires avant de pouvoir définir le périmètre du travail.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

Hello

I will try to explain the case in the simplest way that I could:

I have a component: Employee.tsx

It has a pseudo code like this:

const Employee = () => {

   const { name, status } = useEmployeeDetails();
    const { updateEmployeeInfo } = useEmployeeData(();
    const { clearStorage} = useCleanData();

    const generalUpdate = async() => {
          await updateEmployeeInfo(name, status);
           clearStorage();
    }

    return(
            <>
               <span>update</update>
               <button onClick={generalUpdate}></button>
           </>
           )

}

I am trying to write a test for 'generalUpdate' function that contains async function (updateEmployeeInfo) that is using hooks data as parameters, also I want to have a way how to access or spy on this function to be able to manipulate it and test different scenarios.

So :
1- How to access a function inside a functional component.
2- how to mock this function, especially if it is using another async function in its implementation?

Basically testing a function that is using data from hooks (or using async function inside it) and it exists inside a functional component

I hope my explanation is clear 😄

Langage dominant
JavaScript
Étoiles
19.7k
Forks
1.2k
Aucune PR mergée en 30 j

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de testing-library/react-testing-library

Toutes les issues de testing-library/react-testing-library

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.