Mocker un refresh de page pour tester une fonctionnalité d'un composant
Salut tout le monde,
Je n'arrive pas à forcer le rafraîchissement de ma page lorsque je teste mon composant.
J'ai un composant fonctionnel en React qui lorsqu'on appuie sur un bouton rafraîchit la page.
Voici le composant que j'ai essayé de simplifier au maximum :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| import { useLocation } from "react-router-dom" ;
const Component : React.FC<{ initialData? : string | undefined }> = ({ initialData = undefined }) => {
const [someInternalData, setSomeInternalData] = useState(initialData) ;
const [someBoolean, setSomeBoolean] = useState(false) ;
const location:any = useLocation() ;
useEffect(() =>
{
if(location.state == null){
console.log("première implémentation") ;
} else {
const someDataFromLocation:string|undefined = location.state.someData ;
if(someDataFromLocation) {
setInternalData(someDataFromLocation) ;
setSomeBoolean(true) ;
}
}
}
,
[setSomeInternalData]
) ;
function refreshPage() {
window.history.replaceState({}, document.title);
window.location.reload();
}
return(
<div>
<div>
<button type="button" data-testid="refresh-button" onClick={refreshPage}>Refresh</button>
</div>
...//J'ai besoin ici de la variable someBoolean pour décider de ce qu'il faut afficher après
</div>
);
}
export default Component; |
Pour tester ce composant, j'ai réalisé le test suivant dans lequel je veux appeler la méthode window.location.reload() à un moment donné :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { render, screen, fireEvent, waitFor, cleanup } from '@testing-library/react';
import Component from './Component';
//Autre fonction de mocks pour axios et un composant enfant mais je n'en ai pas besoin pour la partie problématique de mon test, je ne pense pas que le problème vienne de là.
jest.mock('axios');
const mockChildComponent = jest.fn();
describe('Component', () => {
afterEach(cleanup);
beforeEach(()=>{
jest.clearAllMocks()
})
const reload = window.location.reload ;
beforeAll(() => {
Object.defineProperty(window, 'location', {
valeur : { reload : jest.fn() }
}) ;
}) ;
afterAll(() => {
window.location.reload = reload ;
}) ;
test('il peut être cliqué', async () => {
jest.spyOn(window.location, 'reload') ;
render(<Router>
<Component />
</Router>,) ;
//Je teste ensuite les différentes fonctionnalités de mon composant qui fonctionne très bien jusqu'à ce que je doive appeler window.location.reload dans mon composant.
fireEvent.click(screen.getByTestId(/refresh-button/i)) ;
await waitFor(() => {
expect(window.location.reload).toHaveBeenCalledTimes(1) ; //OK mais c'est normal que cela fonctionne car je l'ai mocké
//Attends qu'un élément soit visible sur la page après le rafraîchissement mais échoue parce que window.location.state n'a pas fonctionné et j'ai toujours mon ancienne page.
expext(screen.queryByTestId(/some-test-id/i)).toBeInTheDocument() ;
//Attends qu'un autre élément ne soit pas visible sur la page après le rafraîchissement mais échoue parce que window.location.state n'a pas fonctionné et 'ai toujours mon ancienne page.
expect(screen.queryByTestId(/some-other-test-id/i)).toBeNull() ;
}) ;
}) ;
}) ; |
Comme j'ai essayé de l'expliquer dans les commentaires, après avoir testé les différentes fonctionnalités de mon composant qui fonctionne bien, je teste ensuite le bouton de rafraîchissement.
Lorsque j'arrive à la partie du test qui va utiliser window.location.reload(), le test peut continuer mais la page ne se recharge pas, les données restent les mêmes qu'au début du test et ne sont pas remises à 0.
Savez-vous comment forcer un rafraîchissement de la page dans la méthode simulée de window.location.reload() ? Dans tous les cas si c'est faisable je suis preneur d'une solution mais est-ce que selon vous il s'agit d'une fonctionnalité inutile à tester car trop générique? Je ne vais pas rester longtemps sur ce projet et le code n'étant pas trop complexe il n'est pas commenté, on considère les noms de variables et les tests comme étant suffisants pour comprendre le code. Du coup je pensais mettre ce test dans le cas où ce bouton serait "cassé" par la suite, pour garder une trace et informé les futurs personnes qui serait amené à travailler sur le code.
Merci d'avance si vous prenez le temps de m'aider.
