In Testing Recipes, I want to change to use root.unmount() and createRoot.
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- JavaScript
- Estrellas
- 11.8k
- Forks
- 7.9k
- Merge medio
- 1 d 11 h
- PR fusionados (30 d)
- 11
Descripción
unmountComponentAtNode is used on Testing Recipes.
https://reactjs.org/docs/testing-recipes.html
However, unmountComponentAtNode(container) has been changed to root.unmount() in react 18.
It also shows to use createRoot.
https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
So I replaced it in my code as follows
// before
import { unmountComponentAtNode } from "react-dom";
let container = null;
beforeEach(() => {
// setup a DOM element as a render target
container = document.createElement("div");
document.body.appendChild(container);
});
afterEach(() => {
// cleanup on exiting
unmountComponentAtNode(container);
container.remove();
container = null;
});
// after
import { createRoot } from 'react-dom/client';
let container = null;
let root = null;
beforeEach(() => {
// setup a DOM element as a render target
container = document.createElement("div");
document.body.appendChild(container);
root = createRoot(container);
});
afterEach(() => {
// cleanup on exiting
act(() => root.unmount());
container.remove();
container = null;
});
root.unmount() is wrapped in act(...) because it gives the following warning:
Warning: An update to Root inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
Is this policy and implementation of mine correct?
If correct I will try to create a pull request.
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comienza con la página „Testing Recipes“ en https://reactjs.org/docs/testing-recipes.html y compara sus ejemplos de cleanup y rendering con la „React 18 upgrade guide“ enlazada en el issue. Revisa el uso propuesto de createRoot, root.unmount() y act(), y después actualiza las recipes para que reflejen la React 18 testing API y ya no muestren el patrón obsoleto.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript, react
- Área
- documentation
- Tipo de issue
- Documentación
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 38/100