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

Aberta
  • Algo errado?
#1,382 1 comentário 1 reação 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
25/100
Tipo de issue
Documentação
Clareza
Precisa de esclarecimento
Status de atividade
Estagnada
Stack de tecnologia
react, typescript
Domínio
frontend, testing

Direção de pesquisa

O exemplo está em Employee.tsx e faz referência a useEmployeeDetails, useEmployeeData e useCleanData, mas nenhum teste do repositório nem caminho de origem é indicado. Comece localizando esses hooks e o componente Employee e, em seguida, determine o comportamento visível para o usuário acionado pelo botão de atualização. É necessário ter um resultado esperado concreto e uma localização para o teste antes que o escopo do trabalho possa ser definido.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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 😄

Linguagem predominante
JavaScript
Estrelas
19.7k
Forks
1.2k
Nenhum PR com merge em 30d

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de testing-library/react-testing-library

Todas as issues de testing-library/react-testing-library

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.