React: Expresar más pruebas a través de la API pública

Puedo echar un vistazo a esto durante el fin de semana y ver si puedo abordarlo a corto plazo.

¡Muchas gracias! Si elige una prueba en particular, comente con el nombre del archivo en el hilo para que nadie más comience a trabajar en la misma prueba.

Definitivamente estoy muy interesado en contribuir a esto. ¡Revisaré este fin de semana y encontraré una oportunidad para refactorizar!

a mi tambien me interesa 👍

Publiqué una lista de pruebas en el primer post. Sólo dime cuáles te gustaría tomar y te las asignaré.

ReactDOMInput-test me parece bien :)

@SadPandaBear ¡Lo tienes!

Puedo trabajar en ReactErrorUtils-test . 😄

Voy a echar un vistazo a setInnerHTML-test.js

Haré getEventCharCode-test.js . 😀

Puedo trabajar en getEventKey-test.js .

Puedo tomar escapeTextContentForBrowser-test.js .

Me gustaría darle una oportunidad a ChangeEventPlugin-test.js :)

Puedo tomar SyntheticEvent-test.js

Me gustaría trabajar en EnterLeaveEventPlugin-test.js

Me gustaría trabajar en ReactDOMEventListener-test.js

Me gustaría tomar BeforeInputEventPlugin-test.js

Me gustaría tomar SyntheticKeyboardEvent-test.js. Gracias 👍

Déjame tomar inputValueTracking-test.js

Me gustaría trabajar en SyntheticWheelEvent-test.js

¿Puedo tomar: ReactBrowserEventEmitter-test.js ?

Estoy tomando SelectEventPlugin-test.js

Me gustaría trabajar en ReactDOMComponentTree-test.js

Me gustaría trabajar en ReactTreeTraversal-test.js

¡Hola! 👋 Me gustaría trabajar en ReactCoroutine-test.js

Puedo tomar SyntheticClipboardEvent-test.js

Me gustaría trabajar en validateDOMNesting-test.js

Podría tomar EventPluginRegistry-test.js

Me gustaría probarme ReactDOMComponent-test.js

¡Hola! ¡Me gustaría probarme quoteAttributeValueForBrowser-test.js ! :músculo:

¡Hola! ¡Me gustaría probarme ReactDOMServerIntegration-test.js !

Tomaré ReactIncrementalPerf-test.js

Haré getNodeForCharacterOffset-test.js

@burnsbeaver ¿Cuál es, FallbackCompisitionState-test o getNodeForCharacterOffset-test ? Nos gustaría comenzar con una prueba por persona.

getNodeForCharacter por favor. Eliminé el otro comentario, perdón por la confusión.

¡Todavía tenemos FallbackCompositionState-test.js y ReactFiberHostContext-test.js gratis!

¡Tomaré FallbackCompisitionState!

Puedo probar ReactFiberHostContext-test.js

Actualización: todas las pruebas se toman ahora. ¡Suscríbete a este número! Podrían liberarse en el futuro si alguien no tiene tiempo para terminar el trabajo. Comentaremos si alguna prueba vuelve a estar disponible para volver a intentarlo.

A todas las personas que tomaron las pruebas, ¡gracias! Quiero reiterar que la solución no siempre es clara y, en algunos casos, es posible que ni siquiera sea posible probar razonablemente el comportamiento sin algunos cambios en la fuente de React. Si alguna vez te sientes atascado, comenta aquí e intentaremos idear un plan.

@adsonpleal Lamento decepcionarlo. Acabo de verificar y, lamentablemente, accidentalmente ya arreglamos ReactFiberHostContext-test . No me di cuenta de esto al principio, pero TODO está desactualizado. Esta es la única prueba que veo que ya está arreglada.

@gaearon Wow, refactorizar ReactDOMInput-test me llevará algo de tiempo, pero espero terminar todo este fin de semana.

tengo una pequeña duda:
¿Está bien reemplazar todo ese comportamiento de la función setUntrackedValue que usa inputValueTracking a algo como ReactTestUtils.Simulate.? ?

Por cierto, puede consultar mi PR aquí para ver qué hice para eliminar los inputValueTracking . Sé que algunas de estas pruebas pueden basarse en cosas muy específicas de inputValueTracking , pero me preguntaba si ReactTestUtils se puede usar de manera efectiva en su lugar.

Por inputValueTracking @jquense debería tener más contexto sobre cómo hacerlo mejor. Pero siempre que lo haga funcionar, podemos revisar y ver si el enfoque funciona o no.

Solo un aviso para cualquier otra persona, tenía instalada una versión anterior de yarn (0.22) y estaba tratando de ejecutar las pruebas localmente y todo se estaba rompiendo. La actualización de yarn a la última (1.2.1) solucionó el problema y las pruebas funcionan bien ahora.

@sadpandabear Tengo el mismo módulo en mi archivo de prueba, así que pronto revisaré su implementación

@gaearon Para las pruebas setInnerHTML , sienten que dependen de la existencia de setInnerHTML para que el conjunto de pruebas tenga sentido.

Puedo escribir algunas pruebas para reemplazar las funciones existentes, pero luego el conjunto de pruebas está más en la línea de configurar html interno, en lugar de cualquier cosa específica para setInnerHTML . Supongo que me estoy obsesionando un poco con el nombre del conjunto de pruebas.

EDITAR: A menos que me equivoque... Los SVG tienen una propiedad innerHTML . No estoy seguro de que la segunda parte de las pruebas en este archivo sean necesarias.

@silvestrijonathan Creo que lo que esas pruebas realmente intentan verificar es que dangerouslySetInnerHTML funciona como se esperaba en React. Entonces, si modifica esas pruebas para usar ReactDOM y renderiza el mismo contenido con dangerouslySetInnerHTML , eso debería ser suficiente. Está bien cambiar el nombre de la prueba a dangerouslySetInnerHTML-test si cree que sería más apropiado.

Después de un par de horas jugando con mi archivo de prueba, tengo una fuerte sugerencia para los recién llegados (como yo): comience sus pruebas con un env (archivo) limpio.
¡Estaba editando el archivo existente y se burlaba de algunas funciones internas, por lo que algunas funciones de ReactTestUtils estaban rotas! Me tomó un tiempo darme cuenta de por qué las cosas no funcionaban según lo previsto.

@gaearon Creo que debemos aclarar que ReactTestUtils , incluida la simulación de eventos, debe considerarse una API privada. Eso llega indirectamente a las API internas, por lo que no nos permite probar correctamente cómo funcionaría de otra manera. Por ejemplo, obstaculizará nuestra capacidad de probar paquetes compilados sin exponer esos ganchos y no nos permitirá probar un nuevo sistema de eventos no sintético.

@dphurley , noté que estás trabajando en ReactIncrementalPerf-test . También estaba trabajando en un conjunto de pruebas que usa ReactCoroutine , así que quería informarles sobre este PR: #11338.
No estoy seguro de si ya ha enviado un PR, pero si no lo ha hecho, podría ser una buena idea basarlo en el n.º 11338 (si se acepta).

@gaearon Gracias por tu consejo. Pensé en utilizar React-DOM con dangerouslySetInnerHTML para las pruebas, ¡así que lo haré de esa manera!

Y sí, probablemente cambiaré el nombre de las pruebas a eso en ese caso. Busque mi PR en el próximo día más o menos.

¡Tenemos las primeras relaciones públicas fusionadas!

Échale un vistazo: https://github.com/facebook/react/pull/11309

Si está trabajando en algo relacionado con eventos, le sugiero que lea las discusiones en https://github.com/facebook/react/pull/11309 y las reseñas en:

https://github.com/facebook/react/pull/11316
https://github.com/facebook/react/pull/11317
https://github.com/facebook/react/pull/11327
https://github.com/facebook/react/pull/11332

Hay algunos temas comunes y puede ser valioso usar esas discusiones para guiar a otros RP en la dirección correcta.

Grandes convos a la referencia-gracias!

El trabajo estuvo un poco ocupado, pero creo que podré abrir un PR este fin de semana para mis pruebas.

Todavía tengo que investigar la prueba que he recogido. Estaba ocupado con otras cosas. Intentaré generar un PR en un par de días, ¿puedo ganar algo de tiempo?

¡Suena bien, seguro!

yo tuve el mismo problema

¡Otro PR fusionado! https://github.com/facebook/react/pull/11316

Dos más abajo. https://github.com/facebook/react/pull/11317 https://github.com/facebook/react/pull/11385

Escribí un pequeño análisis sobre cómo abordé una de las pruebas. https://github.com/facebook/react/pull/11385#issuecomment-341934588

por lo que puedo decir, todos están ocupados, publíquelos aquí si hay alguno libre y lo veré

Fusioné dos relaciones públicas más que tratan específicamente con SyntheticEvent s. Si realizó alguna prueba relacionada, revísela e intente combinar el estilo y el enfoque: https://github.com/facebook/react/pull/11365 y https://github.com/facebook/react/issues/ 11299

@gaearon Por EventPluginRegistry-test.js , ¿cómo deberíamos reescribir la prueba usando la API pública? Veo que estamos inyectando complementos predeterminados en ReactDom.js -> ReactDOMClientInjection.js
{
Complemento de evento simple,
Complemento EnterLeaveEvent,
Complemento de cambio de evento,
Seleccionar complemento de evento,
Complemento BeforeInputEvent,
}

Entonces, ¿cómo podríamos inyectar exactamente nuestro complemento simulado de prueba y probar la funcionalidad EventPluginRegistry ?
Busqué cualquier complemento personalizado y encontré react-tap-event-plugin para verificar cómo se inyectan exactamente los complementos personalizados.
¿Es esta la única forma de inyectar complementos?

require('react-dom').__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.EventPluginHub.injection.injectEventPluginsByName({ 'TapEventPlugin': require('./TapEventPlugin.js')(shouldRejectClick) });

Me temo que estoy muy por encima de mi cabeza en ReactTreeTraversal-test.js
Si alguien más quiere darle una oportunidad, siéntase libre de hacerlo.

@aqumus

EventPluginRegistry es complicado. Supongo que el primer paso sería averiguar dónde se está utilizando realmente. Tienes razón en que el complemento de evento tap es el único que todavía nos comprometemos a admitir. Convenientemente lo tenemos justo en el repositorio. Entonces, ¿tal vez podamos agregar una prueba que funcione específicamente?

También es probable que RN use EventPluginRegistry . ¿Tenemos alguna prueba que verifique que los eventos de RN funcionen? No sé. Vale la pena comentar diferentes partes de EventPluginRegistry y ver si alguna prueba falla. Podemos eliminar sus pruebas de API privadas si el mismo código ya está cubierto por otras pruebas que estresan esas rutas de código. ¿Esto tiene sentido?

@gdevincenzi Suena bien, eliminaré la tarea.

Además, voy a estar fuera esta semana, pero no dejes que esto te impida continuar con esto. Espero fusionar algunos PR enviados la próxima semana.

puedo tomar ReactTreeTraversal-test.js - es una API desconocida pero parece una buena oportunidad para aprenderla. consejo bienvenido @gdevincenzi

Felicitaciones a @gordyd por terminar uno bastante complejo: https://github.com/facebook/react/pull/11383.

Este es un buen ejemplo de cuán diferente puede verse el código antes y después mientras se prueban esencialmente las mismas cosas. Y cómo puede descubrir qué se supone que debe hacer el código buscando referencias, mirando el historial de git y comentando diferentes líneas.

Todavía no hemos recibido un PR de los siguientes usuarios:

@email2vimalraj
@andrevargas
@tranotheron
@minerado
@sw-yx
@rey0120
@aarboleda1
@danilowoz
@dms1lva
@morajabi
@dphurley
@reznord
@aqumus

¿Podrías confirmar si empezaste a trabajar en esto? Tengo más personas que quieren ayudar en la cola, así que si no tienes tiempo, sería genial darles a otros la oportunidad de trabajar en esto.

@andrevargas Acabo de notar su discusión en https://github.com/facebook/react/pull/11331. Supongo que tiene sentido mantener esos cambios unificados allí.

Por favor, agrégueme a esa cola @gaearon

@gaearon Sí, tienes razón. Solo para confirmar, @jeremenichelli está trabajando en quoteAttributeValueForBrowser-test.js en #11331, y estoy al tanto de esto. Creo que puedes actualizar este hilo con su nombre de usuario y el enlace de relaciones públicas.

Por favor, agrégueme también a la cola @gaearon

@gaearon He comenzado a trabajar en ello. Planeo publicar mis hallazgos o un PR en algún momento de esta semana.

@gaearon Comencé a trabajar en SyntheticKeyboardEvent.js. Planeando tener una PR este fin de semana.

@gaearon También podría tomar cualquiera de las pruebas en caso de que las personas asignadas originalmente no tengan el tiempo necesario para trabajar en ellas.

@gaearon Perdón por la gran demora, estoy haciendo una PR WIP ahora. Actualización: ¿Alguien puede explicar brevemente qué debo hacer para no confiar en las API privadas? Además, no sé sobre top<EventName> s. Gracias.

https://github.com/facebook/react/blob/92b7b172cce9958b846844f0b46fd7bbd8c5140d/packages/react-dom/src/events/__tests__/SelectEventPlugin-test.js > extract función

@gaearon Perdón por la larga demora 😅. Trabajaré en esto hoy y le avisaré si tengo algunas dudas al respecto.

@morajabi una forma potencial de abordar esto

• Mire SelectEventPlugin y comprenda qué funcionalidad proporciona al usuario
• Escribir código que haga uso de esa funcionalidad.
• Deshabilite la carga SelectEventPlugin (coméntelo) y vea qué falla (asegúrese de que algo se rompa)
• El código que ha escrito ahora es la primera versión de su prueba, por lo que puede ponerlo en un caso de prueba.
• Habilite la carga SelectEventPlugin nuevamente y asegúrese de que pase la prueba
• Optimiza tu código

@gaearon disculpa por la demora
Según su sugerencia, intenté comentar algunas partes de EventPluginRegistry.js y encontré muchos casos de prueba que fallaban ( SyntheticWheelEvent , ReactDOMComponentTree , SyntheticClipboardEvent , SyntheticWheelEvent , inputValueTracking , SimpleEventPlugin , ChangeEventPlugin , ReactDOMComponentTree etc.),
Supongo que principalmente porque ReactBrowserEventEmitter.js usa registrationNameDependencies que se define en EventPluginRegistry.js

Aunque al comentar

• línea 208
• línea 38-41

ninguno de los casos de prueba falló (solo la prueba EventPluginRegistry falló)
Basado en esto, supongo que EventPluginRegistry ya está cubierto por otras suites de prueba.

Convenientemente lo tenemos justo en el repositorio.

no entendí que quisiste decir con esto

¿Hay alguna otra sugerencia en la que pueda trabajar para reescribir EventPluginRegistry usando la API pública?

Para otros (no estoy seguro de si esto se había transmitido antes), encontré que el podcast de video @kentcdodds : tutorial de código de evento de reacción de Ben Alpert fue muy útil.

Lo siento @gaearon , traté de hacerlo, pero ahora no tengo tiempo libre para terminarlo.
Entonces, si alguien más quiere obtener mis problemas, siéntase libre :)

@danilowoz @gaearon Si no le importa, podría usar BeforeInputEventPlugin-test.js.

@timjacobi ¿Cuál es el reemplazo de ReactDOMComponentTree.getInstanceFromNode ?

Además, ¿dónde debo desactivarlo?

Deshabilite la carga de SelectEventPlugin (coméntelo) y vea qué se rompe (asegúrese de que algo se rompa)

@morajabi No estoy seguro de que estés abordando esto en el nivel correcto. ¿Podrías abrir un WIP PR con lo que tienes hasta ahora? No quiero contaminar demasiado este hilo.

@timjacobi No puedo cuando no he cometido nada nuevo. Lo siento, estoy bastante ocupado estos días si alguien puede tomar SelectEventPlugin-test .

Parece que ya no necesitamos ReactDOMServerIntegration-test (cc @minerado) ya que lo he cubierto junto con otros cambios.

@aqumus Según su análisis, eliminaré EventPluginRegistry-test.js de esta lista. Creo que mantendremos esto como una prueba unitaria de esas partes internas particulares, pero es bueno saber que la lógica real está cubierta por otras pruebas.

@king0120 Reasignaré getEventCharCode-test a @aarboleda1 porque está trabajando en una prueba muy relacionada en https://github.com/facebook/react/pull/11631 , y podría ser más fácil hacerlo juntos.

@morajabi @gaearon También podría echarle un vistazo a SelectEventPlugin-test.js.

@email2vimalraj FYI, reescribí inputValueTracking-test .

Estas pruebas no tienen propietario actualmente:

• [ ] getNodeForCharacterOffset-test.js (3/5) tomado por @accordeiro
• [ ] ReactBrowserEventEmitter-test.js (5/5) tomado por @madeinfree
• [ ] BeforeInputEventPlugin-test.js + FallbackCompositionState-test.js (5/5, deben combinarse) tomado por @GordyD
• [x] SelectEventPlugin-test (2/5) tomado por @skiritsis
• [x] ReactTreeTraversal-test.js (4/5) tomado por @timjacobi

Los clasifiqué según mi percepción de su dificultad.

Tenemos una cola con @timjacobi @kwnccc @skiritsis , así que ustedes tres podrían decirnos si les gustaría tomar alguna de estas pruebas (especifique cuál). También puedes pasar, y dejaremos que alguien más lo intente.

Tenga en cuenta que estos se están volviendo bastante complicados, por lo que no son exactamente aptos para principiantes. No son reemplazos mecánicos; deberá comprender qué intenta verificar la prueba y luego crear una prueba de API pública equivalente (que podría verse muy diferente).

Para tomar estos, debe sentirse cómodo investigando cosas por su cuenta, de manera similar a como lo hizo @GordyD en https://github.com/facebook/react/pull/11383. De hecho, si a @GordyD le gustaría tomar alguno de estos, ¡me encantaría darle uno!

@skiritsis Como estaba interesado, le reasignaré SelectEventPlugin-test .

Me gustaría trabajar en ReactBrowerEventEmitter-test.js 💪

@gaearon : Gracias por eso, perdón por no responder a tiempo. Estaba ocupado con otro trabajo. Veré cómo lo reescribiste para que lo entienda.

Puedo echar un vistazo a ReactTreeTraversal-test.internal.js

@madeinfree Démosle unos días a @kwnccc para que responda primero, ya que ya está en la cola. Si no está interesado, te lo asignaré más tarde.

@gaearon ¡Está bien! lo tengo, gracias ~

@gaearon Echaré un vistazo a la combinación BeforeInputEventPlugin + FallbackCompositionState si no hay otros interesados.

Suena bien, gracias @GordyD!

Por cierto, aquí hay algunas pruebas de eventos más que se convirtieron, para darle una idea de cómo termina siendo este código: https://github.com/facebook/react/pull/11631 https://github. com/facebook/react/pull/11525

@gaearon Estoy feliz de tomar ReactBrowserEventEmitter-test.js también si nadie más lo quiere.

@madeinfree

¿Sigues interesado en ReactBrowerEventEmitter ? Si es así, tómalo y mantennos informados.

@gaearon ¡Está bien! Me gustaría tomarlo.

Lo tienes.

¿Alguien quiere quedarse con los getNodeForCharacterOffset-test restantes?

Puedo ayudar con este ( getNodeForCharacterOffset-test ) :)

@gaearon No he encontrado el momento para sumergirme en ReactIncrementalPerf-test.js como pensé que lo haría. ¡Disculpas por aferrarme a él durante tanto tiempo, pero está disponible si alguien lo quiere!

@accordeiro ¡Lo tienes!

@gaearon realmente lo siento, no me notificaron. Si todavía hay algunas pruebas de las que ocuparse, por favor hágamelo saber. Espero que haya quedado algo fácil para empezar.

@kwnccc ¿ Quieres investigar ReactIncrementalPerf-test.js ?

¿Puedo investigar ReactIncrementalPerf-test.js ? O si es necesario, puedo ayudar a @kwnccc a escribir una prueba para ello.
No veo ningún archivo llamado ReactIncrementalPerf.js , entonces, ¿tenemos que escribir la prueba para ReactPortal.js ?

Si he entendido un poco el problema en ReactIncrementalPerf-test.js (corríjame si me equivoco), significa que necesito cambiar de ReactPortal.createPortal(...) a una API pública como react-dom con ReactDOM .createPortal(...) ? @gaearon

@gaearon Realmente me gustaría probar ReactIncrementalPerf-test.js . Dado que @abiduzz420 comenzó a revisarlo, incluso podríamos formar un equipo si fuera necesario.

Sí, claro @kwnccc , estoy feliz de trabajar contigo. Estabas en la cola antes que yo, ¡así que todo tuyo!

@kwnccc Recibo un error de prueba en yarn test y un error de flujo cuando ejecuto yarn flow . enviaré el código a mi repositorio bifurcado: https://github.com/abiduzz420/react para que también puedas trabajar en

 FAIL  packages\react-reconciler\src\__tests__\ReactIncrementalPerf-test.internal.js (11.191s)
  ● ReactDebugFiberPerf › supports portals

    Invariant Violation: Target container is not a DOM element.

      at invariant (node_modules/fbjs/lib/invariant.js:42:15)
      at Object.createPortal (packages/react-dom/src/client/ReactDOM.js:1112:70)
      at Object.<anonymous> (packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js:510:116)

$ yarn flow
yarn run v1.3.2
$ node ./scripts/tasks/flow.js
Error: packages/react-reconciler/src/ReactFiberHostContext.js:87
 87:     const nextContext = getChildHostContext(context, fiber.type, rootInstance);
                                                 ^^^^^^^ NoContextT. This type is incompatible with the expected param type of
                    v---------------------------------------------
 31: export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
 32:   config: HostConfig<T, P, I, TI, HI, PI, C, CC, CX, PL>,
 33: ): HostContext<C, CX> {
     --------------------^ some incompatible instantiation of `CX`

Error: packages/react-reconciler/src/ReactFiberHostContext.js:87
 87:     const nextContext = getChildHostContext(context, fiber.type, rootInstance);
                                                                      ^^^^^^^^^^^^ NoContextT. This type is incompatible with the expected param type of
                    v---------------------------------------------
 31: export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
 32:   config: HostConfig<T, P, I, TI, HI, PI, C, CC, CX, PL>,
 33: ): HostContext<C, CX> {
     --------------------^ some incompatible instantiation of `C`
Found 2 errors
Flow failed
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@abiduzz420 El problema de flujo es un problema conocido en Windows. No está relacionado (pero tendremos que averiguar por qué sucede). Consulte https://github.com/facebook/react/issues/11703.

@kwnccc En cuanto a ReactIncrementalPerf-test , sí, esto requerirá un poco de reflexión. Creo que en este momento es mejor mover temporalmente ReactPortal a shared . Luego haga que ReactNoop proporcione su propio método createPortal() (como lo hace ReactDOM ).

¡Uno más abajo! https://github.com/facebook/react/issues/11299

@gaearon He movido ReactPortal al directorio compartido y todas las pruebas pasan. Necesito un poco de ayuda para implementar mi propio método createPortal() por ReactNoop . Inspirándome en cómo se escribe createPortal() en ReactDOM devolveré ReactPortal.createPortal(children,container,null,key) .
Estoy pensando en estas líneas:

function createPortal( children: ReactNodeList, container: Container, key: ?string = null) {
invariant( 
// TODO: Need to figure out this part of the code
);
return ReactPortal.createPortal(children, container, null, key);
}

Por favor, hágamelo saber si lo estoy haciendo bien?

@gaearon Mi código sigue siendo un wip. Pero quería verificar dos veces si estoy en el camino correcto. Realmente me ayudaría si pudiera echar un vistazo rápido a mi código y aclarar algunas dudas:

1. ¿Es correcto el enfoque que he tomado?
2. Supongo que las pruebas deben cubrir todas las etiquetas y escenarios que se prueban en el
   pruebas para mantener la cobertura de las pruebas. No estoy seguro de si hay una forma de generar componentes dinámicamente con estas etiquetas especiales y de formato. ¿Me puede dar algunos consejos sobre una manera eficiente de lograr esto?
3. No estoy seguro de cómo probar la parte 'sin contexto' de la prueba 'cualquier etiqueta sin contexto' con la API pública porque el método isTagValidInContext() no se usa en ningún otro lugar excepto en el archivo de prueba. ¿Algunas ideas?

@abiduzz420 Sí, esto suena bien

@anushreesubramani

¿Es correcto el enfoque que he tomado?

En general, sí, pero querremos evitar la duplicación allí. Idealmente, debería pasar de una serie de

expect(isTagStackValid(['a', 'a'])).toBe(false);

a una serie de

expectInvalidNestingWarning(true, ['a', 'a']);

donde expectInvalidNestingWarning es una función personalizada que genera el componente y luego afirma que representarlo produce una advertencia.

No estoy seguro de si hay una forma de generar componentes dinámicamente con estas etiquetas especiales y de formato. ¿Me puede dar algunos consejos sobre una manera eficiente de lograr esto?

Sí, estoy pensando en algo como:

function expectInvalidNestingWarning(shouldWarn, tags) {
  let element = null;
  tags = [...tags];
  while (tags.length) {
    element = React.createElement(tags.pop(), null, element);
  }
  const container = document.createElement('div');
  ReactDOM.render(element, container);
  // assert either a warning or lack of one based on shouldWarn
}

Revisamos la matriz, tomamos el último elemento y envolvemos el elemento actual en un padre con la etiqueta correspondiente. De esta manera al final terminamos con el árbol correspondiente. Puede que haya escrito algo mal, pero esa es la idea general.

Probablemente también quieras poner algo como

jest.resetModules();
React = require('react');
ReactDOM = require('react-dom');

en esa función justo antes de renderizar porque, de lo contrario, las advertencias se pueden desduplicar y no podemos probarlas de manera confiable.

No estoy seguro de cómo probar la parte 'sin contexto' de la prueba 'cualquier etiqueta sin contexto' con la API pública porque el método isTagValidInContext() no se usa en ningún otro lugar excepto en el archivo de prueba

En cuanto a la culpa, se agregó en https://github.com/facebook/react/commit/76bb96ef21b7c665e1b51b6bb90e64ec40c0f16a y en ese momento también se llamó fuera de las pruebas. Pero en algún momento en el futuro ya no se usó. La prueba menciona la renderización de servidores:

https://github.com/facebook/react/blob/8cbc16f0faedafe4f7424b286af52dafd7a79587/packages/react-dom/src/__tests__/validateDOMNesting-test.internal.js#L144 -L145

pero esta función ya no se usa con la representación del servidor tampoco.

De este comentario deduzco que el objetivo es garantizar que nunca advirtamos cuando no conocemos a los antepasados . Sin embargo, no puedo encontrar una ruta de código que pase null como ancestorInfo a validateDOMNesting . Por lo tanto, probablemente siempre conozcamos a los antepasados ​​en la versión actual. Así que diría que es seguro eliminar esta prueba por completo.

@gaearon Creé el método para createPortal() en ReactNoop.js y antes de eso también había cambiado el archivo ReactPortal.js al directorio compartido como sugirió. Revise mi código, y si hay modificaciones o adiciones que debo hacer, lo haré.

¿Puedes enviar un PR por favor? Es más fácil discutir en una revisión.

@abiduzz420 Parece que has hecho un gran trabajo, lo siento, ¡pero no tuve tiempo de empezar a trabajar en eso antes de hoy! ¡Realmente me alegro de que hayas podido completar la prueba! 👏👏
@gaearon a continuación me aseguraré de tener una gran disponibilidad

Actualización rápida de @gaearon : comencé a refactorizar/combinar BeforeInputEventPlugin + FallbackCompositionState pruebas. Tengo un buen manejo de cómo probar la implementación a través de la API pública. Ahora estoy trabajando en la creación de casos de prueba para ejercitar las diferentes rutas de código que dependen de los diferentes entornos de ejecución/motores de navegación. Espero tener un primer PR hacia el final de esta semana (para el 10 de diciembre, actualizado, necesito un poco más de tiempo , mirando el 12 de diciembre).

Genial, gracias por la actualización!

Actualización rápida de @gaearon por mi parte: ya comencé a trabajar en la reescritura de las pruebas por getNodeForCharacterOffset-test y debería poder impulsar un PR hasta el jueves, ¿está bien?

Suena bien

¡Uno más abajo! https://github.com/facebook/react/pull/11742

@reznord Todavía no hemos sabido nada de ti. ¿Empezaste algo? Si estás demasiado ocupado, tal vez sea mejor darle a alguien más la oportunidad de intentarlo.

Hacer ping a @reznord

Hola @gaearon , ¿puedo tomar ReactErrorUtils-test.js para mi primera contribución?

hola, @gaearon hay algo que pueda hacer en ReactErrorUtils-test.js

Hola, ¿alguien puede ayudarme a continuar con la prueba ReactBrowserEventEmitter-test.js? Debido a que estaré ocupado en mi trabajo, ahora no tengo tiempo para continuar, el PR es https://github.com/facebook/react/pull/11713 , ¡muchas gracias!

¡Gracias a todos de nuevo! Todavía hay algunas pruebas pendientes, pero creo que podemos cerrarlo.

@gaearon : ReactErrorUtils-test.js Me gustaría trabajar en ello. me confirmas si puedo retirar?