<p dir="auto">This is a great contribution opportunity.<br>
We need to rewrite more unit tests in terms of public API.</p>
<p dir="auto">This means that they can only import npm entry points like <code class="notranslate">react</code>, <code class="notranslate">react-dom</code>, <code class="notranslate">react-dom/test-utils</code>, <code class="notranslate">react-test-renderer</code>, etc, but not internal modules like <code class="notranslate">SyntheticEvent</code> or <code class="notranslate">ReactDOMComponentTree</code>. The “bad” requires are already marked with a TODO in tests so you won’t miss them.</p>
<p dir="auto">To help with this:</p>
<ol dir="auto">
<li>Find <strong><code class="notranslate">// TODO: can we express this test with only public API?</code></strong> in the unclaimed test files below.</li>
<li>Comment in this issue if you want to take a particular unit test file, with its name.</li>
<li>Submit a PR that rewrites the test to use public APIs instead.</li>
</ol>
<p dir="auto">Step 3 requires some thinking. You can use previous examples where we rewrote tests with public API for inspiration. For example:</p>
<ul dir="auto">
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="249374374" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/10429" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/10429/hovercard" href="https://github.com/facebook/react/pull/10429">#10429</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="245722791" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/10281" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/10281/hovercard" href="https://github.com/facebook/react/pull/10281">#10281</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="210813620" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/9080" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/9080/hovercard" href="https://github.com/facebook/react/pull/9080">#9080</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="186094729" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/8148" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/8148/hovercard" href="https://github.com/facebook/react/pull/8148">#8148</a></li>
</ul>
<p dir="auto">Generally, you need to think about how the behavior you’re testing actually reproduces in a React app, and then test for that. In rare cases it may involve exposing some API as public which we’ll need to discuss separately, so don’t hesitate to start a discussion! If you can’t figure out how to rewrite some particular test with a public API, comment here and we can brainstorm.</p>
<p dir="auto">Here is the full list of tests that need to change. Some of them may be simple one-liner changes, some may involve a bit of a rewrite, some may require rewriting from scratch. Some may even be impossible, but research leading to that conclusion is still very valuable and we’d love to know that.</p>
<p dir="auto">Try them and let us know:</p>
<p dir="auto"><strong>Update: all tests are taken now. Subscribe to this issue! They might free up in the future if somebody doesn’t have the time to finish the work. We’ll comment if some test becomes available to try again.</strong></p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> <code class="notranslate">ReactBrowserEventEmitter-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/madeinfree/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/madeinfree">@madeinfree</a>, see <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="267200825" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11299" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/11299/hovercard?comment_id=355188567&amp;comment_type=issue_comment" href="https://github.com/facebook/react/issues/11299#issuecomment-355188567">#11299 (comment)</a>)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> <code class="notranslate">getNodeForCharacterOffset-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/accordeiro/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/accordeiro">@accordeiro</a>)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> <code class="notranslate">ReactErrorUtils-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/reznord/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/reznord">@reznord</a>)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <code class="notranslate">BeforeInputEventPlugin-test.js</code> + <code class="notranslate">FallbackCompositionState-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/GordyD/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/GordyD">@GordyD</a>)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <code class="notranslate">validateDOMNesting-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/anushreesubramani/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/anushreesubramani">@anushreesubramani</a>) <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="278492887" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11742" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/11742/hovercard" href="https://github.com/facebook/react/pull/11742">#11742</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">ReactIncrementalPerf-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/dphurley/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/dphurley">@dphurley</a>)</s> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="278205385" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11724" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/11724/hovercard" href="https://github.com/facebook/react/pull/11724">#11724</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">SelectEventPlugin-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/skiritsis/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/skiritsis">@skiritsis</a>)</s> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="267200825" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11299" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/11299/hovercard" href="https://github.com/facebook/react/issues/11299">#11299</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">ReactTreeTraversal-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/timjacobi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/timjacobi">@timjacobi</a>) </s> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="276790929" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11664" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/11664/hovercard" href="https://github.com/facebook/react/pull/11664">#11664</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">SyntheticKeyboardEvent-test.js</code> + <code class="notranslate">getEventCharCode-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/aarboleda1/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/aarboleda1">@aarboleda1</a>)</s></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">escapeTextContentForBrowser-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jeremenichelli/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jeremenichelli">@jeremenichelli</a>)</s> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="267507762" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11331" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/11331/hovercard" href="https://github.com/facebook/react/pull/11331">#11331</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">inputValueTracking-test.js</code></s></li><s>
<li><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">quoteAttributeValueForBrowser-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jeremenichelli/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jeremenichelli">@jeremenichelli</a>)</s> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="267507762" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11331" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/11331/hovercard" href="https://github.com/facebook/react/pull/11331">#11331</a></li>
<li><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">ReactDOMComponent-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/AudyOdi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/AudyOdi">@AudyOdi</a>)</s> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="267607456" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11337" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/11337/hovercard" href="https://github.com/facebook/react/pull/11337">#11337</a></li>
<li><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">ReactDOMComponentTree-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/GordyD/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/GordyD">@GordyD</a>)</s> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="268987852" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11383" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/11383/hovercard" href="https://github.com/facebook/react/pull/11383">#11383</a></li>
<li><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">ReactDOMEventListener-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/enapupe/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/enapupe">@enapupe</a>)</s> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="267497703" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11327" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/11327/hovercard" href="https://github.com/facebook/react/pull/11327">#11327</a></li>
<li><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">ReactDOMInput-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/SadPandaBear/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/SadPandaBear">@SadPandaBear</a>)</s> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="267330503" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11309" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/11309/hovercard" href="https://github.com/facebook/react/pull/11309">#11309</a></li>
<li><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">ReactDOMServerIntegration-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/minerado/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/minerado">@minerado</a>)</s></li>
<li><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">setInnerHTML-test.js</code> (taken by @silvestrijonathan)</s> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="269101909" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11385" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/11385/hovercard" href="https://github.com/facebook/react/pull/11385">#11385</a><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="276165547" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11631" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/11631/hovercard" href="https://github.com/facebook/react/pull/11631">#11631</a></li>
<li><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">getEventKey-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mjw56/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mjw56">@mjw56</a>)</s> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="267425716" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11317" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/11317/hovercard" href="https://github.com/facebook/react/pull/11317">#11317</a></li>
<li><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">SyntheticClipboardEvent-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/smaniotto/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/smaniotto">@smaniotto</a>)</s> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="268574894" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11365" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/11365/hovercard" href="https://github.com/facebook/react/pull/11365">#11365</a></li>
<li><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">SyntheticEvent-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/timjacobi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/timjacobi">@timjacobi</a>)</s> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="273101970" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11525" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/11525/hovercard" href="https://github.com/facebook/react/pull/11525">#11525</a></li>
<li><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">SyntheticWheelEvent-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/douglasgimli/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/douglasgimli">@douglasgimli</a>)</s> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="268761737" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11367" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/11367/hovercard" href="https://github.com/facebook/react/pull/11367">#11367</a></li>
<li><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">ChangeEventPlugin-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Ethan-Arrowood/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Ethan-Arrowood">@Ethan-Arrowood</a>)</s> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="267539623" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11333" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/11333/hovercard" href="https://github.com/facebook/react/pull/11333">#11333</a></li>
<li><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">EnterLeaveEventPlugin-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/accordeiro/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/accordeiro">@accordeiro</a>)</s> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="267419915" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11316" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/11316/hovercard" href="https://github.com/facebook/react/pull/11316">#11316</a></li>
<li><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">ReactCoroutine-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jstejada/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jstejada">@jstejada</a>)</s></li>
<li><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <s><code class="notranslate">ReactFiberHostContext-test.js</code> (taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/adsonpleal/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/adsonpleal">@adsonpleal</a>)</s></li>
</s></ul><s>
<hr>
<p dir="auto"><strong>First-time contributor? Refer to our <a href="https://reactjs.org/docs/how-to-contribute.html" rel="nofollow">contribution instructions</a>.</strong></p>
<p dir="auto"><strong>Not clear how to fix a specific test? Comment with what you tried, and we can brainstorm.</strong></p>
<p dir="auto"><strong>If you gave up on some test, please post your findings in a comment so we can decide what to do next. It’s fine if you just didn’t find the time or couldn’t figure it out—we can try to help, and maybe somebody else can pick it up later.</strong></p>
<hr></s>
<p dir="auto">Guys, I'm starting my holidays next week, and also I need this in one of my projects.</p>
<p dir="auto">I was discussing this with <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/zpao/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/zpao">@zpao</a> in one of issue discussions here.</p>
<p dir="auto">Basically the idea is to take ember-rails code and use it to expose react.js and jsxtransformer.js in assets/.</p>
<p dir="auto">Second thing would be to register sprockets engine to transform JSX, we could steal a bit of code from <a href="https://github.com/leshill/handlebars_assets">https://github.com/leshill/handlebars_assets</a> and using execjs run jsxtransformer. I already tested all this and it works ok. Good thing we have a patch merged to allow jsx transformation using non-node, non-browser JS environment: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="17006255" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/217" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/217/hovercard" href="https://github.com/facebook/react/pull/217">#217</a></p>
<p dir="auto">If no one is in a hurry about this, I would start making this gem, restructure the repo a bit (move all gem files into gems/ dir) and make all that's necessary to have a proper react-rails gem. I should be ready with an initial version of this some time next week.</p>
<p dir="auto">PR will follow.</p>