React: Проведите больше тестов через общедоступный API

Я могу взглянуть на это на выходных и посмотреть, смогу ли я справиться с этим в краткосрочной перспективе.

Большое спасибо! Если вы выберете какой-либо конкретный тест, пожалуйста, прокомментируйте его с именем файла в теме, чтобы кто-то другой не начал работать над тем же тестом.

Я определенно очень заинтересован в том, чтобы внести свой вклад в это. На выходных посмотрю и найду возможность сделать рефакторинг!

Мне тоже интересно 👍

Список тестов я опубликовал в первом посте. Просто дайте мне знать, какие из них вы хотели бы взять, и я назначу их вам.

ReactDOMInput-test меня устраивает :)

@SadPandaBear Ты понял!

Я могу работать с ReactErrorUtils-test . 😄

Я посмотрю на setInnerHTML-test.js

Я сделаю getEventCharCode-test.js . 😀

Я могу работать с getEventKey-test.js .

Я могу взять escapeTextContentForBrowser-test.js .

Хочу попробовать ChangeEventPlugin-test.js :)

Я могу взять SyntheticEvent-test.js

Я хотел бы работать над EnterLeaveEventPlugin-test.js

Я хотел бы работать над ReactDOMEventListener-test.js

Я хотел бы взять BeforeInputEventPlugin-test.js

Я хотел бы взять SyntheticKeyboardEvent-test.js. Спасибо 👍

Позволь мне взять inputValueTracking-test.js

Я хотел бы работать над SyntheticWheelEvent-test.js

Могу я взять: ReactBrowserEventEmitter-test.js ?

Я беру SelectEventPlugin-test.js

Я хотел бы работать над ReactDOMComponentTree-test.js

Я хотел бы работать над ReactTreeTraversal-test.js

Привет! 👋 Хочу поработать над ReactCoroutine-test.js

Я могу взять SyntheticClipboardEvent-test.js

Я хотел бы работать над validateDOMNesting-test.js

Я мог бы взять EventPluginRegistry-test.js

Я хотел бы примерить ReactDOMComponent-test.js

Привет! Я хотел бы примерить quoteAttributeValueForBrowser-test.js ! :мышца:

Привет! Я хотел бы примерить ReactDOMServerIntegration-test.js !

Я возьму ReactIncrementalPerf-test.js

Я сделаю getNodeForCharacterOffset-test.js

@burnsbeaver Что это, FallbackCompisitionState-test или getNodeForCharacterOffset-test ? Мы хотели бы начать с одного теста на человека.

getNodeForCharacter, пожалуйста. Я удалил другой комментарий, извините за путаницу!

У нас еще есть FallbackCompositionState-test.js и ReactFiberHostContext-test.js бесплатно!

Я возьму FallbackCompisitionState!

Я могу попробовать ReactFiberHostContext-test.js

Обновление: все тесты сданы. Подпишитесь на этот выпуск! Они могут освободиться в будущем, если у кого-то не будет времени закончить работу. Мы прокомментируем, если какой-то тест станет доступным, чтобы попробовать еще раз.

Всем, кто проходил тесты — спасибо! Я хочу повторить, что решение не всегда ясно, и в некоторых случаях может быть даже невозможно разумно протестировать поведение без некоторых изменений в самом исходном коде React. Если вы когда-нибудь почувствуете, что застряли, оставьте комментарий здесь, и мы постараемся придумать план.

@adsonpleal Извините, что разочаровал вас — я только что проверил, и, к сожалению, мы случайно уже исправили ReactFiberHostContext-test . Сначала я этого не понял, но этот TODO устарел. Это единственный тест, который я вижу, который уже исправлен.

@gaearon Вау, рефакторинг ReactDOMInput-test займет у меня некоторое время, но я надеюсь, что закончу все в эти выходные.

У меня есть небольшое сомнение:
Можно ли заменить все это поведение функции setUntrackedValue , которая использует inputValueTracking , на что-то вроде ReactTestUtils.Simulate.? ?

Кстати, вы можете проверить мой PR здесь, чтобы увидеть, что я сделал, чтобы удалить inputValueTracking . Я знаю, что некоторые из этих тестов могут полагаться на очень специфические вещи из inputValueTracking , но мне просто интересно, можно ли вместо этого эффективно использовать ReactTestUtils .

Для inputValueTracking @jquense должен иметь больше всего контекста о том, как это сделать лучше всего. Но пока вы заставите его работать, мы можем проверить и посмотреть, работает ли этот подход или нет.

Просто напомню всем, у меня была установлена ​​более старая версия пряжи (0.22), и я пытался запустить тесты локально, и все ломалось. Обновление пряжи до последней версии (1.2.1) устранило проблему, и теперь тесты проходят нормально.

@sadpandabear У меня есть такой же модуль в моем тестовом файле, поэтому я скоро проверю вашу реализацию.

@gaearon Что касается тестов setInnerHTML , они чувствуют, что они зависят от существования setInnerHTML , чтобы набор тестов имел смысл.

Я могу написать несколько тестов для замены существующих функций, но тогда набор тестов больше похож на настройку внутреннего html, а не на что-то конкретное для setInnerHTML . Я полагаю, что немного зациклился на названии набора тестов.

РЕДАКТИРОВАТЬ: Если я не ошибаюсь... SVG имеют свойство innerHTML . Не уверен, что вторая часть тестов в этом файле вообще необходима.

@silvestrijonathan Я думаю, что эти тесты действительно пытаются проверить, что dangerouslySetInnerHTML работает в React так, как ожидалось. Поэтому, если вы измените эти тесты, чтобы использовать ReactDOM и визуализировать тот же контент с помощью dangerouslySetInnerHTML , этого должно быть достаточно. Можно переименовать тест в dangerouslySetInnerHTML-test , если вы считаете, что это более уместно.

После пары часов игры с моим тестовым файлом у меня есть сильное предложение для новичков (таких как я): начните свои тесты с чистого env (файла).
Я редактировал существующий файл, и он издевался над некоторыми внутренними функциями, поэтому несколько функций ReactTestUtils были сломаны!! Мне потребовалось некоторое время, чтобы понять, почему все работает не так, как предполагалось.

@gaearon Я думаю, нам нужно уточнить, что ReactTestUtils , включая симуляцию событий, следует рассматривать как частный API. Это косвенно затрагивает внутренние API, поэтому не позволяет нам должным образом проверить, как это будет работать в противном случае. Например, это будет препятствовать нашей возможности тестировать скомпилированные пакеты, не раскрывая эти ловушки, и не позволит нам протестировать новую несинтетическую систему событий.

@dphurley , я заметил, что ты работаешь над ReactIncrementalPerf-test . Я также работал над тестовым набором, который использует ReactCoroutine , поэтому хотел предупредить вас об этом PR: #11338.
Я не уверен, что вы уже отправили PR, но если вы этого не сделали, было бы неплохо взять за основу #11338 (если он будет принят).

@gaearon Спасибо за совет. Я думал об использовании React-DOM с dangerouslySetInnerHTML для тестов, так что я пойду по этому пути!

И да, я, вероятно, переименую тесты в этом случае. Ищите мой PR на следующий день или около того.

У нас есть первый объединенный PR!

Взгляните на это: https://github.com/facebook/react/pull/11309

Если вы работаете над чем-то, связанным с событиями, я предлагаю вам прочитать как обсуждения в https://github.com/facebook/react/pull/11309 , так и обзоры в:

https://github.com/facebook/реагировать/тянуть/11316
https://github.com/facebook/реагировать/тянуть/11317
https://github.com/facebook/react/pull/11327
https://github.com/facebook/реагировать/тянуть/11332

Есть несколько общих тем, и может быть полезно использовать эти обсуждения, чтобы направить других PR в правильном направлении.

Отличные конвоты по ссылке-спасибо!

Работа была немного занята, но я думаю, что смогу открыть PR на этих выходных для своих тестов.

Мне еще предстоит изучить тест, который я взял. Занялся другими делами. Через пару дней попробую поднять PR, можно выиграть время?

Звучит хорошо, конечно!

у меня была такая же проблема

Очередной пиар слился! https://github.com/facebook/реагировать/тянуть/11316

Еще двое вниз. https://github.com/facebook/react/pull/11317 https://github.com/facebook/react/pull/11385

Написал небольшой анализ о том, как я подошел к одному из тестов. https://github.com/facebook/react/pull/11385#issuecomment-341934588

насколько я могу судить, они все заняты, пожалуйста, напишите здесь, если что-то освободится, и я посмотрю

Я объединил еще два PR, которые касаются конкретно SyntheticEvent s. Если вы проходили какие-либо связанные тесты, проверьте их и постарайтесь соответствовать стилю и подходу: https://github.com/facebook/react/pull/11365 и https://github.com/facebook/react/issues/ 11299

@gaearon Для EventPluginRegistry-test.js , как нам переписать тест с использованием общедоступного API, я вижу, что мы внедряем плагины по умолчанию в ReactDom.js -> ReactDOMClientInjection.js
{
SimpleEventPlugin,
EnterLeaveEventPlugin,
Плагин ChangeEvent,
ВыбратьEventPlugin,
Плагин перед входом события,
}

Итак, как именно мы можем внедрить наш тестовый плагин и протестировать функциональность EventPluginRegistry
Я искал любой пользовательский плагин и нашел react-tap-event-plugin , чтобы проверить, как именно внедряются пользовательские плагины.
Это единственный способ вставлять плагины?

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

Боюсь, я выше головы на ReactTreeTraversal-test.js
Если кто-то еще хочет попробовать, не стесняйтесь.

@акумус

EventPluginRegistry сложно. Я предполагаю, что первым шагом было бы выяснить, где он на самом деле используется. Вы правы в том, что плагин Tap Event — единственный, который мы все еще поддерживаем. Удобно, что он у нас есть прямо в репо. Так что, может быть, мы можем добавить тест, который конкретно работает?

Также вероятно, что RN использует EventPluginRegistry . Есть ли у нас тесты, подтверждающие работу событий RN? Я не знаю. Стоит закомментировать разные части EventPluginRegistry и посмотреть, не провалятся ли какие-либо тесты. Мы можем удалить его частные тесты API, если тот же код уже покрыт другими тестами, которые нагружают эти пути кода. Имеет ли это смысл?

@gdevincenzi Звучит хорошо, я удалю задание.

Кроме того, я собираюсь отсутствовать на этой неделе, но, пожалуйста, не позволяйте этому помешать вам продолжить. Надеемся получить еще несколько представленных PR на следующей неделе.

я могу взять ReactTreeTraversal-test.js — это незнакомый API, но мне кажется, что его стоит изучить. совет приветствую @gdevincenzi

Поздравляем @gordyd с завершением довольно сложного проекта: https://github.com/facebook/react/pull/11383.

Это хороший пример того, насколько по-разному может выглядеть код до и после тестирования практически одних и тех же вещей. И как вы можете понять, что должен делать код, ища ссылки, просматривая историю git и комментируя разные строки.

Мы еще не получили PR от следующих пользователей:

@email2vimalraj
@андреваргас
@tranotheron
@минерадо
@sw-yx
@king0120
@aarboleda1
@danilowoz
@dms1lva
@мораджаби
@dphurley
@резнорд
@акумус

Не могли бы вы подтвердить, если вы начали работу над этим? У меня в очереди больше желающих помочь, поэтому, если у вас нет времени, было бы здорово дать другим возможность поработать над этим.

@andrevargas Только что заметил ваше обсуждение на https://github.com/facebook/react/pull/11331. Думаю, имеет смысл сохранить эти изменения унифицированными.

Пожалуйста, добавьте меня в эту очередь @gaearon

@gaearon Да, ты прав. Просто чтобы подтвердить, @jeremenichelli работает над quoteAttributeValueForBrowser-test.js в #11331, и я знаю об этом. Я думаю, вы можете обновить эту ветку, указав его имя пользователя и ссылку на PR.

Пожалуйста, также добавьте меня в очередь @gaearon

@gaearon Я начал над этим работать. Планирую опубликовать свои выводы или PR где-нибудь на этой неделе.

@gaearon Я начал работать над SyntheticKeyboardEvent.js. На выходных планирую пиар.

@gaearon Я также мог бы пройти любой из тестов на случай, если у людей, которые были первоначально назначены, нет времени, необходимого для работы над ними.

@gaearon Извините за долгую задержку, сейчас я делаю WIP PR. Обновление: кто-нибудь может кратко объяснить, что мне делать, чтобы не полагаться на частные API? Кроме того, я не знаю о top<EventName> s. Спасибо.

https://github.com/facebook/react/blob/92b7b172cce9958b846844f0b46fd7bbd8c5140d/packages/react-dom/src/events/__tests__/SelectEventPlugin-test.js > функция extract

@gaearon Извините за долгую задержку 😅. Я буду работать над этим сегодня и сообщу вам, если у меня есть какие-то сомнения по этому поводу.

@morajabi один из возможных способов решить эту проблему

• Посмотрите на SelectEventPlugin и поймите, какие функции он предоставляет пользователю.
• Напишите код, который использует эту функциональность
• Отключите загрузку SelectEventPlugin (закомментируйте) и посмотрите, что сломается (убедитесь, что что-то сломается)
• Код, который вы написали, теперь является первой версией вашего теста, поэтому вы можете поместить его в тестовый пример.
• Включите загрузку SelectEventPlugin еще раз и убедитесь, что тест прошел успешно.
• Оптимизируйте свой код

@gaearon извинения за задержку
основываясь на вашем предложении, я попытался прокомментировать несколько частей EventPluginRegistry.js и обнаружил, что множество тестовых случаев не сработало ( SyntheticWheelEvent , ReactDOMComponentTree , SyntheticClipboardEvent , SyntheticWheelEvent , inputValueTracking , SimpleEventPlugin , ChangeEventPlugin , ReactDOMComponentTree и т. д.),
Я думаю, главным образом потому, что ReactBrowserEventEmitter.js использует registrationNameDependencies , который определен в EventPluginRegistry.js

Хотя при комментировании

• строка 208
• строка 38-41

ни один из тестовых случаев не прошел (не прошел только тест EventPluginRegistry )
Основываясь на этом, я предполагаю, что EventPluginRegistry уже покрыт другими наборами тестов.

Удобно, что он у нас есть прямо в репо.

Я не понял, что ты хотел этим сказать

Есть ли какие-либо другие предложения, над которыми я мог бы поработать, чтобы переписать EventPluginRegistry с использованием общедоступного API?

Для других (не уверен, транслировалось ли это раньше) я нашел видеоподкаст @kentcdodds — пошаговое руководство по коду события реакции Бена Альперта очень полезным.

Извините , @gaearon, я пытался это сделать, но сейчас у меня нет свободного времени, чтобы закончить это.
Так что, если кто-то еще хочет получить мои вопросы, не стесняйтесь :)

@danilowoz @gaearon Если вы не возражаете, я могу взять BeforeInputEventPlugin-test.js.

@timjacobi Чем можно заменить ReactDOMComponentTree.getInstanceFromNode ?

Кроме того, где я должен отключить его?

Отключите загрузку SelectEventPlugin (закомментируйте) и посмотрите, что сломается (убедитесь, что что-то сломается)

@morajabi Я не уверен, что ты занимаешься этим на правильном уровне. Не могли бы вы открыть WIP PR с тем, что у вас есть? Я не хочу слишком загрязнять эту ветку.

@timjacobi Я не могу, если я не совершил ничего нового. Извините, я очень занят в эти дни, если кто-то может взять SelectEventPlugin-test .

Похоже, нам больше не нужен ReactDOMServerIntegration-test (cc @minerado), так как я описал его вместе с другими изменениями.

@aqumus На основании вашего анализа я удалю EventPluginRegistry-test.js из этого списка. Я думаю, что мы сохраним это как модульный тест этих конкретных внутренних компонентов, но хорошо знать, что реальная логика покрывается другими тестами.

@ king0120 King0120 Я переназначу getEventCharCode-test @aarboleda1 , потому что он работает над очень похожим тестом в https://github.com/facebook/react/pull/11631 , и может быть проще выполнить их вместе.

@morajabi @gaearon Я мог бы также взглянуть на SelectEventPlugin-test.js.

@email2vimalraj К вашему сведению, я переписал inputValueTracking-test .

У этих тестов в настоящее время нет владельца:

• [ ] getNodeForCharacterOffset-test.js (3/5) взято @accordeiro
• [ ] ReactBrowserEventEmitter-test.js (5/5) взято @madeinfree
• [ ] BeforeInputEventPlugin-test.js + FallbackCompositionState-test.js (5/5, нужно объединить) взято @GordyD
• [x] SelectEventPlugin-test (2/5) взято @skiritsis
• [x] ReactTreeTraversal-test.js (4/5) взято @timjacobi

Я отсортировал их по моему восприятию их сложности.

У нас есть очередь с @timjacobi @kwnccc @skiritsis , поэтому, пожалуйста, сообщите нам втроем, хотите ли вы пройти какой-либо из этих тестов (пожалуйста, укажите, какой именно). Вы тоже можете пройти, и мы позволим кому-нибудь еще попробовать.

Обратите внимание, что они становятся довольно сложными, поэтому они не совсем удобны для новичков. Это не механические замены; вам нужно будет понять , что тест пытается проверить, а затем придумать эквивалентный общедоступный тест API (который может выглядеть совсем иначе).

Чтобы получить их, вам должно быть удобно исследовать вещи самостоятельно, подобно тому, как это сделал @GordyD в https://github.com/facebook/react/pull/11383. На самом деле, если @GordyD захочет взять что-нибудь из этого, я буду счастлив дать ему!

@skiritsis Поскольку вам было интересно, я переназначу вам SelectEventPlugin-test .

Я бы хотел поработать над ReactBrowerEventEmitter-test.js 💪

@gaearon : Спасибо за это, извините, что не ответил вовремя. Занялся другой работой. Я посмотрю, как вы переписали для моего понимания.

Я могу взглянуть на ReactTreeTraversal-test.internal.js

@madeinfree Давайте дадим @kwnccc несколько дней, чтобы ответить первым, так как он уже стоит в очереди. Если он не заинтересован, я передам его вам позже.

@gaearon Хорошо! понял, спасибо~

@gaearon Я посмотрю, как объединить BeforeInputEventPlugin + FallbackCompositionState , если других желающих нет.

Звучит хорошо, спасибо @GordyD!

Кстати, вот еще несколько преобразованных тестов событий, чтобы дать вам представление о том, как обычно выглядит этот код: https://github.com/facebook/react/pull/11631 https://github. com/facebook/реагировать/тянуть/11525

@gaearon Я тоже с радостью возьму ReactBrowserEventEmitter-test.js , если никто больше этого не хочет.

@madeinfree

Вы все еще заинтересованы в ReactBrowerEventEmitter ? Если это так, пожалуйста, возьмите его и держите нас в курсе!

@gaearon Хорошо! Я хотел бы взять это.

Ты получил это.

Кто-нибудь хочет забрать оставшиеся getNodeForCharacterOffset-test ?

Я могу помочь с этим ( getNodeForCharacterOffset-test ) :)

@gaearon Не нашел времени погрузиться в ReactIncrementalPerf-test.js , как я думал. Прошу прощения за то, что так долго тянул с этим, но он доступен, если кто-то хочет!

@accordeiro Ты понял!

@gaearon очень жаль, не получил уведомление. Если есть еще какие-то тесты, о которых нужно позаботиться, пожалуйста, дайте мне знать. Я надеюсь, что осталось что-то легкое для начала.

@kwnccc Хочешь заглянуть в ReactIncrementalPerf-test.js ?

Могу ли я заглянуть в ReactIncrementalPerf-test.js ? Или, если нужно, я могу помочь @kwnccc в письменном тесте.
Я не вижу ни одного файла с именем ReactIncrementalPerf.js , поэтому нам нужно написать тест для ReactPortal.js ?

Если я хоть немного понял проблему в ReactIncrementalPerf-test.js (поправьте меня, если я ошибаюсь), значит, мне нужно переключиться с ReactPortal.createPortal(...) на публичный API, такой как react-dom с ReactDOM .createPortal(...) ? @gaearon

@gaearon Я бы очень хотел попробовать ReactIncrementalPerf-test.js . Поскольку @abiduzz420 начал проверять это, мы могли бы даже объединиться, если это необходимо.

Да, конечно @kwnccc Я счастлив работать с тобой. Вы стояли в очереди раньше меня, так что все ваше!

@kwnccc Я получаю одну тестовую ошибку в yarn test и ошибку потока при запуске yarn flow . я отправлю код в свое разветвленное репо: https://github.com/abiduzz420/react , чтобы вы также могли работать над

 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 Проблема с потоком — известная проблема в Windows. Это не связано (но нам нужно выяснить, почему это происходит). См . https://github.com/facebook/react/issues/11703.

@kwnccc Что касается ReactIncrementalPerf-test , да, это потребует некоторых размышлений. Я думаю, что сейчас лучше временно переместить ReactPortal в shared . Затем попросите ReactNoop предоставить свой собственный метод createPortal() (как это делает ReactDOM ).

Еще один вниз! https://github.com/facebook/react/issues/11299

@gaearon Я переместил ReactPortal в общий каталог, и все тесты проходят. Нужна небольшая помощь в реализации моего собственного метода createPortal() для ReactNoop . Вдохновившись тем, как createPortal() написано в ReactDOM , я верну ReactPortal.createPortal(children,container,null,key) .
Я думаю об этих строках:

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);
}

Пожалуйста, дайте мне знать, правильно ли я делаю?

@gaearon Мой код все еще не работает. Но я хотел перепроверить, на правильном ли я пути. Мне бы очень помогло, если бы вы могли быстро взглянуть на мой код и прояснить несколько сомнений:

1. Правилен ли выбранный мной подход?
2. Я предполагаю, что тесты должны охватывать все теги и сценарии, которые тестируются в существующих
   тесты для поддержания тестового покрытия. Я не уверен, есть ли способ динамически генерировать компоненты с помощью этих специальных тегов и тегов форматирования. Можете ли вы дать мне несколько советов по эффективному способу достижения этого?
3. Я не уверен, как проверить часть «без контекста» теста «любой тег без контекста» с общедоступным API, потому что метод isTagValidInContext() не используется нигде, кроме как в тестовом файле. Есть идеи?

@abiduzz420 Да, звучит правильно

@anushreesubramani

Правилен ли выбранный мной подход?

В целом да, но мы хотим избежать дублирования. В идеале он должен получиться из ряда

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

к серии

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

где expectInvalidNestingWarning — это пользовательская функция, которая генерирует компонент, а затем утверждает, что его рендеринг выдает предупреждение.

Я не уверен, есть ли способ динамически генерировать компоненты с помощью этих специальных тегов и тегов форматирования. Можете ли вы дать мне несколько советов по эффективному способу достижения этого?

Да, я думаю что-то вроде:

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
}

Проходим по массиву, берем последний элемент и оборачиваем текущий элемент в родителя с соответствующим тегом. Таким образом, в конце мы получим соответствующее дерево. Может я что-то не так написал, но в целом это так.

Вы также, вероятно, захотите поместить что-то вроде

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

в этой функции прямо перед рендерингом, потому что в противном случае предупреждения могут быть дедуплицированы, и мы не сможем их надежно протестировать.

Я не уверен, как проверить часть «без контекста» теста «любой тег без контекста» с общедоступным API, потому что метод isTagValidInContext() не используется нигде, кроме как в тестовом файле.

Глядя на вину, она была добавлена ​​​​в https://github.com/facebook/react/commit/76bb96ef21b7c665e1b51b6bb90e64ec40c0f16a , и в этот момент она также вызывалась вне тестов. Но в какой-то момент в будущем он перестал использоваться. В тесте упоминается серверный рендеринг:

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

но эта функция больше не используется и при серверном рендеринге.

Из этого комментария я понял, что цель состоит в том, чтобы мы никогда не предупреждали , когда не знаем предков . Однако я не могу найти путь кода, который передал бы null как ancestorInfo до validateDOMNesting . Поэтому мы, вероятно, всегда знаем предков в текущей версии. Поэтому я бы сказал, что безопасно полностью удалить этот тест.

@gaearon Я создал метод для createPortal() в ReactNoop.js , а до этого я также переместил файл ReactPortal.js в общий каталог, как вы предложили. Пожалуйста, просмотрите мой код, и если мне нужно внести какие-либо изменения или дополнительные дополнения, я это сделаю.

Можете ли вы отправить PR, пожалуйста? Обсуждать в обзоре проще.

@abiduzz420 Кажется, вы проделали отличную работу, извините, но у меня не было времени начать работать над этим раньше сегодняшнего дня! Очень рады, что вы смогли пройти тест! 👏👏
@gaearon в следующий раз я позабочусь о том, чтобы у меня была отличная доступность

Быстрое обновление @gaearon : я начал рефакторинг/объединение тестов BeforeInputEventPlugin + FallbackCompositionState . У меня есть хорошее представление о том, как протестировать реализацию через общедоступный API. Сейчас я работаю над созданием тестовых примеров, чтобы отработать различные пути кода, зависящие от разных сред выполнения/движков браузера. Я ожидаю получить первый PR ближе к концу этой недели (к 10 декабря - обновлено, мне нужно немного больше времени - смотрю на 12 декабря).

Красиво, спасибо за обновление!

Краткое обновление @gaearon с моей стороны: я уже начал работать над переписыванием тестов для getNodeForCharacterOffset-test и должен быть в состоянии отложить PR до четверга — это нормально?

Звучит неплохо

Еще один вниз! https://github.com/facebook/реагировать/тянуть/11742

@reznord Мы еще ничего от тебя не слышали — ты что-нибудь начал? Если вы слишком заняты, возможно, лучше дать шанс кому-то другому.

Пинг @reznord

Привет, @gaearon , Могу ли я получить ReactErrorUtils-test.js за свой первый вклад?

привет, @gaearon я могу что-то сделать в ReactErrorUtils-test.js

Привет, кто-нибудь может помочь мне продолжить тест ReactBrowserEventEmitter-test.js? Поскольку я занят своей работой, сейчас нет времени продолжать, PR https://github.com/facebook/react/pull/11713 , большое спасибо !!

Спасибо всем еще раз! Есть еще несколько невыполненных тестов, но я думаю, что мы можем их закрыть.

@gaearon : ReactErrorUtils-test.js Я хотел бы поработать над этим. Вы можете подтвердить, могу ли я забрать это?