Summary
Não consigo detectar automaticamente, no frontend, uma deleção no backend, pra que os repositories sejam renderizados novamente.
Expected Behavior - Please describe the behavior you are expecting
Ao rodar yarn test
, ambos os testes devem passar sem falhas.
Current Behavior - What is the current behavior?
Ao rodar yarn test
, apenas o primeiro teste está passando (should be able to add new repository
). O segundo teste (should be able to remove repository
) falha.
Received:
"<li>Desafio ReactJS<button>Remover</button></li>
Context - Please provide any relevant information about your setup
O repositório está sendo removido corretamente no backend com o NodeJS...
O problema é que no frontend com o ReactJS, no código que eu fiz, após uma deleção o array repositories
é atualizado fazendo um novo get()
e atualizando o array com um setProjects
:
const [repositories, setRepositories] = useState([]);
async function handleRemoveRepository(id) {
await api.delete(`/repositories/${id}`);
api.get('/repositories').then(response => {
setRepositories(response.data);
});
}
E como o teste faz a requisição delete()
e já verifica se o <ul>
está vazio ou não (ou seja, ele não passa pela mesma lógica implementada em minha deleção):
apiMock.onDelete("repositories/123").reply(204);
await actWait();
fireEvent.click(getByText("Remover"));
await actWait();
expect(getByTestId("repository-list")).toBeEmpty();
Assim, eu não sei de que maneira seria possível que o frontend detectasse automaticamente que uma alteração no backend foi feita e renderizasse a aplicação novamente, sem precisar passar por essa lógica que eu implementei.
Meu useEffect() é esse:
useEffect(() => {
api.get('/repositories').then(response => {
setRepositories(response.data);
});
}, []);
Já tentei colocar um [projects] ali como segundo parâmetro (para que o useEffect sempre atualizasse após uma alteração no estado projects), mas o projects
do frontend não alterou (foi apagado apenas no backend), e o yarn test
trava e fica carregando para sempre.