In Testing Recipes, I want to change to use root.unmount() and createRoot.
Ninguém assumiu esta issue ainda.
- Linguagem predominante
- JavaScript
- Estrelas
- 11.8k
- Forks
- 7.9k
- Merge médio
- 1d 11h
- PRs com merge (30d)
- 11
Descrição
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.
Guia de contribuição
Primeiros passos
- Leia a issue inteira e depois o guia de contribuição do projeto.
- Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
- Faça um fork do repositório e trabalhe em uma branch.
- Abra um pull request que referencie o número da issue.
Direção de pesquisa
Comece pela página „Testing Recipes“ em https://reactjs.org/docs/testing-recipes.html e compare seus exemplos de cleanup e rendering com o „React 18 upgrade guide“ vinculado na issue. Revise o uso proposto de createRoot, root.unmount() e act() e, em seguida, atualize as recipes para que reflitam a React 18 testing API e não mostrem mais o padrão desatualizado.
Escrita pelo modelo de indexação a partir do texto da issue.
Avaliação
- Stack de tecnologia
- javascript, react
- Domínio
- documentation
- Tipo de issue
- Documentação
- Dificuldade
- 2/5
- Tempo estimado
- 1-3 horas
- Status de atividade
- Estagnada
- Clareza
- Razoavelmente clara
- Facilidade para iniciantes
- 38/100