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 중 어느 것입니까? 1인당 하나의 테스트로 시작하고 싶습니다.

getNodeForCharacter 부탁드립니다. 다른 댓글은 지웠어요 혼란을 드려 죄송합니다!

아직 FallbackCompositionState-test.js 및 ReactFiberHostContext-test.js 가 무료입니다!

FallbackCompisitionState를 사용하겠습니다!

나는 ReactFiberHostContext-test.js를 시도할 수 있습니다

업데이트: 모든 테스트가 지금 진행됩니다. 이번 호를 구독하세요! 누군가가 작업을 마칠 시간이 없다면 나중에 여유가 생길 수 있습니다. 일부 테스트를 다시 시도할 수 있게 되면 의견을 말하겠습니다.

시험에 응시한 모든 사람들에게 – 감사합니다! 솔루션이 항상 명확한 것은 아니며 어떤 경우에는 React 소스 자체를 약간 변경하지 않고는 동작을 합리적으로 테스트하는 것이 불가능할 수도 있다는 점을 반복하고 싶습니다. 막혔다고 느끼시면 여기에 댓글을 남겨주세요. 계획을 찾도록 노력하겠습니다.

@adsonpleal 실망시켜드려 죄송합니다. 방금 확인했는데 불행히도 이미 ReactFiberHostContext-test 을 수정했습니다. 처음에는 이것을 깨닫지 못했지만 그 TODO는 구식입니다. 이것은 이미 수정된 유일한 테스트입니다.

@gaearon 와, ReactDOMInput-test 리팩토링하는데 시간이 좀 걸리겠지만 이번 주말에 다 끝내길 바랍니다.

나는 작은 의심이 있습니다.
inputValueTracking setUntrackedValue 함수의 모든 동작을 ReactTestUtils.Simulate.? 와 같은 것으로 교체해도 될까요?

그런데 여기 에서 내 PR을 확인하여 inputValueTracking 를 제거하기 위해 무엇을 했는지 확인할 수 있습니다. 이러한 테스트 중 일부는 inputValueTracking 의 매우 구체적인 항목에 의존할 수 있다는 것을 알고 있지만 ReactTestUtils 대신 효과적으로 사용할 수 있는지 궁금합니다.

inputValueTracking 의 경우 @jquense 는 가장 잘 수행하는 방법에 대한 가장 많은 컨텍스트를 가지고 있어야 합니다. 그러나 작동하는 한 접근 방식이 작동하는지 여부를 검토하고 확인할 수 있습니다.

다른 사람에게 주의를 기울이면 이전 버전의 원사(0.22)가 설치되어 있고 로컬에서 테스트를 실행하려고 했으나 모든 것이 중단되었습니다. 원사를 최신(1.2.1)으로 업그레이드하면 문제가 해결되었으며 테스트가 현재 정상적으로 실행되고 있습니다.

@sadpandabear 내 테스트 파일에 동일한 모듈이 있으므로 곧 구현을 확인하겠습니다.

@gaearon setInnerHTML 테스트의 경우 테스트 스위트가 의미를 갖기 위해서는 setInnerHTML 의 존재에 의존하는 것처럼 느낍니다.

기존 기능을 대체하기 위해 몇 가지 테스트를 작성할 수 있지만 테스트 스위트는 setInnerHTML 에 특정한 것과 비교하여 내부 html을 설정하는 라인에 더 가깝습니다. 테스트 스위트의 이름을 짓는 데 조금 얽매이는 것 같아요.

편집: 내가 실수하지 않는 한 ... SVG에는 innerHTML 속성이 있습니다. 이 파일의 두 번째 테스트 청크가 필요한지 확실하지 않습니다.

@silvestrijonathan 그 테스트가 실제로 확인하려는 것은 dangerouslySetInnerHTML 가 React에서 예상대로 작동한다는 것입니다. 따라서 이러한 테스트를 수정하여 ReactDOM을 사용하고 dangerouslySetInnerHTML 로 동일한 콘텐츠를 렌더링하면 충분합니다. 테스트 이름을 dangerouslySetInnerHTML-test 로 바꾸는 것이 더 적절하다고 생각되면 괜찮습니다.

내 테스트 파일을 가지고 몇 시간 놀고 난 후 나는 (나와 같은) 초보자를 위한 강력한 제안이 있습니다: 깨끗한 환경(파일)으로 테스트를 시작하십시오.
기존 파일을 편집하다가 일부 내부 기능을 조롱하여 몇 개의 ReactTestUtils 기능이 깨졌습니다!! 일이 의도한 대로 작동하지 않는 이유를 깨닫는 데 시간이 좀 걸렸습니다.

@gaearon 이벤트 시뮬레이션을 포함하여 ReactTestUtils 는 비공개 API로 간주되어야 한다는 점을 명확히 해야 한다고 생각합니다. 이는 내부 API에 간접적으로 도달하므로 그렇지 않으면 어떻게 작동하는지 제대로 테스트할 수 없습니다. 예를 들어 후크를 노출하지 않고 컴파일된 패키지를 테스트하는 데 방해가 되며 새로운 비합성 이벤트 시스템을 테스트할 수 없습니다.

@dphurley , ReactIncrementalPerf-test 작업 중이라는 것을 알았습니다. 나는 또한 ReactCoroutine 를 사용하는 테스트 스위트에서 작업하고 있었기 때문에 이 PR에 대해 알려드리고 싶었습니다: #11338.
이미 PR을 제출했는지 확실하지 않지만 아직 제출하지 않았다면 #11338(승인된 경우)을 기반으로 작성하는 것이 좋습니다.

@gaearon 조언 감사합니다. 테스트를 위해 React-DOM with dangerouslySetInnerHTML 를 사용할 생각을 했기 때문에 그렇게 하도록 하겠습니다!

그리고 예, 나는 아마도 그 경우에 테스트 이름을 바꿀 것입니다. 다음 날 정도에 내 PR을 찾으십시오.

첫 번째 병합된 PR이 있습니다!

그것을 살펴보십시오 : https://github.com/facebook/react/pull/11309

이벤트와 관련된 작업을 하고 있다면 https://github.com/facebook/react/pull/11309 의 토론과 다음 리뷰를 모두 읽어보시기 바랍니다.

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

몇 가지 공통 주제가 있으며 이러한 토론을 사용하여 다른 PR을 올바른 방향으로 이끄는 것이 중요할 수 있습니다.

참조에 대한 훌륭한 대화 - 감사합니다!

일이 좀 바빴지만 이번 주말에 테스트를 위해 PR을 열 수 있을 것 같습니다.

나는 아직 내가 집어든 시험을 살펴보지 않았다. 다른 일로 바빴습니다. 며칠 후에 PR을 올리려고 합니다. 시간을 벌 수 있습니까?

잘 들립니다.

나는 같은 문제가 있었다

또 하나의 PR이 합쳐졌습니다! https://github.com/facebook/react/pull/11316

두 개 더 아래로. https://github.com/facebook/react/pull/11317 https://github.com/facebook/react/pull/11385

내가 테스트 중 하나에 접근한 방법에 대한 작은 분석을 작성했습니다. https://github.com/facebook/react/pull/11385#issuecomment -341934588

내가 말할 수있는 한 그들은 모두 가져 갔고 여유가 있으면 여기에 게시하십시오. 그러면 내가 볼 것입니다.

특히 SyntheticEvent 를 다루는 2개의 PR을 더 병합했습니다. 관련 테스트를 수행한 경우 https://github.com/facebook/react/pull/11365 및 https://github.com/facebook/react/issues/ 에서 확인하고 스타일과 접근 방식을 일치시키십시오.

@gaearon EventPluginRegistry-test.js 의 경우 공개 API를 사용하여 테스트를 다시 작성해야 하는 경우 ReactDom.js -> ReactDOMClientInjection.js에 기본 플러그인을 주입하고 있음을 알 수 있습니다.
{
단순 이벤트 플러그인,
EnterLeaveEventPlugin,
변경 이벤트 플러그인,
셀렉트 이벤트 플러그인,
BeforeInputEventPlugin,
}

테스트 모의 플러그인을 정확히 어떻게 주입하고 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 에서 너무 과한 것 같아
다른 사람이 그것을 시도하고 싶다면 자유롭게 그렇게하십시오.

@aqumus

EventPluginRegistry 는 까다롭습니다. 첫 번째 단계는 실제로 사용되는 위치를 파악하는 것입니다. 탭 이벤트 플러그인이 우리 가 여전히 지원하기로 약속한 유일한 플러그인이라는 말이 맞습니다. 편리하게 리포지토리에 바로 보관되어 있습니다. 그래서 특별히 작동하는 테스트를 추가할 수 있을까요?

또한 RN이 EventPluginRegistry 를 사용할 가능성도 있습니다. RN 이벤트가 작동하는지 확인하는 테스트가 있습니까? 모르겠어요. EventPluginRegistry 의 다른 부분에 주석을 달고 테스트가 실패했는지 확인하는 것이 좋습니다. 동일한 코드가 해당 코드 경로에 스트레스를 주는 다른 테스트에 이미 포함되어 있는 경우 비공개 API 테스트를 제거할 수 있습니다. 이게 말이 되요?

@gdevincenzi 좋은 것 같습니다. 할당을 제거하겠습니다.

또한, 저는 이번 주에 자리를 비울 예정이지만, 이로 인해 계속 진행되는 데 방해가 되지 않도록 하십시오. 다음 주에 제출된 PR이 몇 개 더 병합되기를 바랍니다.

나는 ReactTreeTraversal-test.js 를 사용할 수 있습니다 - 그것은 익숙하지 않은 API지만 그것을 배우기에 좋은 opp인 것 같습니다. 조언 환영 합니다 @gdevincenzi

다소 복잡한 작업을 마친 @gordyd 에게 축하의 말을 전합니다: https://github.com/facebook/react/pull/11383.

이것은 본질적으로 동일한 것을 테스트하는 동안 코드가 전후에 얼마나 다른지 보여주는 좋은 예입니다. 그리고 참조를 검색하고, git 기록을 보고, 다른 행을 주석 처리하여 코드가 무엇 을 해야 하는지 알아낼 수 있는 방법.

다음 사용자로부터 아직 PR을 받지 못했습니다.

@email2vimalraj
@andrevargas
@tranotheron
@미네라도
@sw-yx
@king0120
@aarboleda1
@danilowoz
@dms1lva
@모라자비
@dphurley
@reznord
@aqumus

이 작업을 시작했는지 확인해 주시겠습니까? 대기열에 도움을 주고 싶은 사람들이 더 많기 때문에 시간이 없다면 다른 사람들에게 이 작업을 할 수 있는 기회를 주는 것이 좋습니다.

@andrevargas 방금 https://github.com/facebook/react/pull/11331에서 귀하의 토론을 발견했습니다. 이러한 변경 사항을 통합된 상태로 유지하는 것이 합리적이라고 생각합니다.

저를 대기열에 추가해주세요 @gaearon

@gaearon 네 맞습니다. 확인을 위해 @jeremenichelli 는 #11331에서 quoteAttributeValueForBrowser-test.js 작업을 하고 있으며 이 사실을 알고 있습니다. 나는 당신이 그의 사용자 이름과 PR의 링크로 이 스레드를 업데이트할 수 있다고 생각합니다.

저를 대기열 @gaearon 에도 추가해주세요.

@gaearon 작업을 시작했습니다. 이번 주에 내 연구 결과나 PR을 게시할 계획입니다.

@gaearon SyntheticKeyboardEvent.js 작업을 시작했습니다. 이번 주말에 PR을 할 계획입니다.

@gaearon 원래 배정된 사람들이 작업할 시간이 없을 경우를 대비하여 어떤 테스트도 수행할 수 있습니다.

@gaearon 늦어서 죄송합니다 지금 WIP PR을 하고 있습니다. 업데이트: 비공개 API에 의존하지 않으려면 어떻게 해야 하는지 간단히 설명해줄 수 있습니까? 또한 top<EventName> 에 대해 잘 모릅니다. 감사 해요.

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 가 EventPluginRegistry.js registrationNameDependencies 를 사용하기 때문인 것 같습니다.

주석을 달 때에도

• 208행
• 38-41행

테스트 케이스 중 실패하지 않음( EventPluginRegistry 테스트만 실패)
이를 바탕으로 EventPluginRegistry 는 이미 다른 테스트 스위트에서 다루고 있습니다.

편리하게 리포지토리에 바로 보관되어 있습니다.

나는 당신이 이것을 의미하는 것을 이해하지 못했습니다

공개 API를 사용하여 EventPluginRegistry 를 다시 작성하기 위해 작업할 수 있는 다른 제안 사항이 있습니까?

다른 사람들에게는(이것이 이전에 방송되었는지 확실하지 않음) @kentcdodds 비디오 팟캐스트 - Ben Alpert의 반응 이벤트 코드 연습이 매우 유용하다는 것을 알았습니다.

@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 @aarboleda1 이 https://github.com/facebook/react/pull/11631 에서 매우 관련된 테스트를 하고 있기 때문에 getEventCharCode-test 를 다시 할당하겠습니다. 함께 하는 것이 더 쉬울 수 있습니다.

@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 가 있는 대기열이 있으므로 이 테스트 중 하나를 수행하고 싶은지 세 분 중 3명에게 알려주십시오. 당신은 또한 통과할 수 있고 우리는 다른 사람이 시도하도록 할 것입니다.

이것들은 꽤 복잡해지기 때문에 초보자에게 친숙하지 않습니다. 그것들은 기계적 대체품이 아닙니다. 테스트가 무엇 을 확인하려고 하는지 이해하고 그에 상응하는 공개 API 테스트(매우 다르게 보일 수 있음)를 제시해야 합니다.

이를 가져오려면 https://github.com/facebook/react/pull/11383 에서 @GordyD 가 했던 것처럼 스스로 편안하게 조사해야 합니다. 사실 @GordyD 가 이 중 하나를 가지고 싶어한다면 기꺼이 그에게 줄 것입니다!

@skiritsis 관심을 가져주셔서 SelectEventPlugin-test 을 다시 할당하겠습니다.

나는 ReactBrowerEventEmitter-test.js에서 일하고 싶습니다 💪

@gaearon : 감사합니다, 제때 응답하지 못해 죄송합니다. 다른 일로 바빴다. 이해를 돕기 위해 어떻게 다시 작성했는지 살펴보겠습니다.

ReactTreeTraversal-test.internal.js 를 볼 수 있습니다.

@madeinfree @kwnccc 가 이미 대기열에 있으므로 먼저 응답할 수 있도록 며칠을 드리겠습니다. 그가 관심이 없다면 나중에 당신에게 할당하겠습니다.

@gaearon OK! 알겠습니다~ 감사합니다

@gaearon 다른 테이커 가 없으면 BeforeInputEventPlugin + FallbackCompositionState 조합을 살펴보겠습니다.

좋은 소리, 감사합니다 @GordyD!

그건 그렇고, 이 코드가 일반적으로 어떻게 되는지에 대한 아이디어를 제공하기 위해 변환된 몇 가지 이벤트 테스트가 더 있습니다. https://github.com/facebook/react/pull/11631 https://github. com/facebook/react/pull/11525

@gaearon 다른 사람이 원하지 않으면 ReactBrowserEventEmitter-test.js 도 가져가게 되어 기쁩니다.

@madeinfree

여전히 ReactBrowerEventEmitter 에 관심이 있습니까? 그렇다면, 그것을 가지고 우리에게 최신 정보를 제공하십시오!

@gaearon OK! 나는 그것을 가지고 싶습니다.

맞아요.

나머지 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(...)에서 ReactDOM이 있는 react-dom과 같은 공개 API로 전환해야 함을 의미합니다. .createPortal(...) ? @gaearon

@gaearon 정말 ReactIncrementalPerf-test.js 해보고 싶어요. @abiduzz420 이 확인을 시작했기 때문에 필요한 경우 팀을 구성할 수도 있습니다.

네 물론 @kwnccc 함께 일하게 되어 기쁩니다. 당신은 나보다 먼저 대기열에 있었고, 그래서 모두 당신의 것입니다!

@kwnccc yarn test 에서 하나의 테스트 오류가 발생하고 $ yarn flow 실행할 때 Flow 오류가 발생합니다. 나는 당신이 작업할 수 있도록 https://github.com/abiduzz420/react 내 fork repo에 코드를 푸시할 것입니다.

 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을 공유 디렉토리로 옮겼고 모든 테스트를 통과했습니다. ReactNoop $에 대한 내 자신의 방법 createPortal() 을 구현하는 데 약간의 도움이 필요합니다. 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 내 코드는 여전히 wip입니다. 하지만 내가 올바른 길을 가고 있는지 다시 확인하고 싶었습니다. 내 코드를 빠르게 살펴보고 몇 가지 의심을 명확히 할 수 있다면 정말 도움이 될 것입니다.

1. 내가 취한 접근 방식이 올바른가요?
2. 테스트가 기존에서 테스트된 모든 태그와 시나리오를 다루어야 한다고 가정합니다.
   테스트 커버리지를 유지하기 위한 테스트. 이러한 특수 및 형식 지정 태그를 사용하여 구성 요소를 동적으로 생성하는 방법이 있는지 확실하지 않습니다. 이것을 달성하는 효율적인 방법에 대한 몇 가지 지침을 줄 수 있습니까?
3. isTagValidInContext() 메서드가 테스트 파일 이외의 다른 곳에서는 사용되지 않기 때문에 공개 API로 '모든 태그 없음 컨텍스트' 테스트의 '컨텍스트 없음' 부분을 테스트하는 방법을 모르겠습니다. 어떤 아이디어?

@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');

그렇지 않으면 경고가 중복 제거될 수 있고 안정적으로 테스트할 수 없기 때문입니다.

isTagValidInContext() 메서드가 테스트 파일 이외의 다른 곳에서는 사용되지 않기 때문에 공개 API로 '모든 태그 없음 컨텍스트' 테스트의 '컨텍스트 없음' 부분을 테스트하는 방법을 잘 모르겠습니다.

비난을 보면 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 ReactNoop.js createPortal() 메소드를 생성했고 그 전에 제안한 대로 ReactPortal.js 파일도 공유 디렉토리로 이동했습니다. 내 코드를 살펴보고 수정하거나 추가해야 할 사항이 있으면 수정하겠습니다.

PR 좀 보내주실 수 있나요? 리뷰에서 논의하는 것이 더 쉽습니다.

@abiduzz420 정말 잘하신 것 같은데요, 죄송합니다만 오늘까지 작업을 시작할 시간이 없었습니다! 테스트를 완료할 수 있어서 정말 기뻤습니다! 👏👏
@gaearon next 꼭 좋은 매물 확보하겠습니다

@gaearon 빠른 업데이트: BeforeInputEventPlugin + FallbackCompositionState 테스트를 리팩토링/결합하기 시작했습니다. 공개 API를 통해 구현을 테스트하는 방법을 잘 알고 있습니다. 지금은 다른 실행 환경/브라우저 엔진에 따라 다른 코드 경로를 실행하기 위해 테스트 케이스를 만드는 작업을 하고 있습니다. 이번 주 말에 첫 번째 PR이 있을 것으로 예상합니다(12월 10일까지 업데이트됨 - 시간이 조금 더 필요함 - 12월 12일 기준).

좋아요, 업데이트해주셔서 감사합니다!

@gaearon 빠른 업데이트: 이미 getNodeForCharacterOffset-test 에 대한 테스트를 다시 작성하는 작업을 시작했으며 목요일까지 PR을 푸시할 수 있어야 합니다. 괜찮습니까?

좋은 소리

하나 더 다운! https://github.com/facebook/react/pull/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 작업하고 싶습니다. 내가 픽업할 수 있는지 확인해 줄 수 있니?