Add Jest to Tic Tac Toe tutorial

[bernard-lin]

Do you want to request a feature or report a bug?

Would there be any interest in adding a Jest section to the Tic Tac Toe tutorial doc? I'm currently working on my own tutorial (based on Eric's code) so figured I'd ask. If it's beyond the scope of React docs, it could also be added as another bullet point in the "Wrapping Up" section.

[aweary]

We could possibly add another bullet point linking to the test utilities doc page which mentions Jest and other common tools.

[bernard-lin]

Sounds good! I'll submit a PR

[gaearon]

I don't think our test utilities page is a good guide for testing. IMO linking to it is more confusing than not 😄

[aweary]

How about linking to the React guide on the Jest site instead?

[gaearon]

To be honest I don't think that React beginners should bother with unit testing because generally unit testing components is very fragile, and not that useful. So it might be good for somebody who's specifically looking out for testing, but probably not as the first thing to do after the tutorial. This time will be better spent writing components.

One thing that needs contributions though is our shallow rendering documentation. As you can see it doesn't really explain anything. So if one would like to contribute to make testing docs more useful, it would be great to move Shallow Rendering section to the top, remove self referential links from it, add an intro paragraph about what it is, and a small example.

[gaearon]

I’ll close this particular issue but feel free to open a different one if you’re interested in making Shallow Rendering docs better.

[aweary]

To be honest I don't think that React beginners should bother with unit testing because generally unit testing components is very fragile, and not that useful. So it might be good for somebody who's specifically looking out for testing, but probably not as the first thing to do after the tutorial. This time will be better spent writing components

Adding it as a bullet point to the Wrapping Up section provides exactly that: an entry point for users who want to learn about testing. It doesn't add any requirements to the tutorial itself, it's only a potential lead for those who want to add tests. I think it adds value without adding confusion, assuming it's worded correctly.

[gaearon]

I feel like it will be out of place in this tutorial. For example the whole tutorial happens in CodePen. Then suddenly we say: by the way, here’s how to test those components. But the person reading may not even have the project set up locally. It is also not clear what to test, or which testing method to use. I don’t think this particular pointer will be very useful in this particular document. The reference to testing in particular seems arbitrary (why not link to Performance Optimizations, or to Refs, or to Forms, or to many other useful topics you generally encounter before testing?)

[aweary]

Maybe that's a symptom of a bigger issue with the tutorial? It should provide a base that users can build on to practice and develop more advanced concepts. If using CodePen limits that, and limits what we can and can't include, we should reconsider whether it's a good idea to use a web IDE. I understand it makes it easier to follow along, but there's a cost to that. At the very least, there should be a link at the end which provides a repo or ZIP with a copy of the game that can be run locally.

The reference to testing, in particular, seems arbitrary (why not link to Performance Optimizations, or to Refs, or to Forms, or to many other useful topics you generally encounter before testing?)

I agree, why not? Performance Optimizations should be linked inline when the tutorial touches on the topic (in the Why Immutability Is Important section). So should refs, which are mentioned in passing. Forms don't seem applicable here since the game doesn't use them. But every game or application can have tests.

We don't have any documentation on writing tests in the React docs. I think it's valuable to provide some entry point for that, and IMO the Wrapping Up section of the tutorial is the most reasonable place to do that right now.

[gaearon]

Maybe that's a symptom of a bigger issue with the tutorial?

In a way, yes. See my comment in #9440 (comment). But solving this is a pre-requisite to diving into any advanced topics.

We don't have any documentation on writing tests in the React docs

IMO that’s the real problem here. Can be solved by a new top-level “Advanced” guide.

[aweary]

@gaearon I think an"Advanced" guide would be a great idea, should we add that to the list in #8060?

[gaearon]

Yea.

[bernard-lin]

I can take a look at the shallow rendering docs!

Out of curiosity, what do you envision that advanced guide looking like? Would it still be based on Tic Tac Toe? Would the primary difference be testing and local setup, or do you see other things being covered as well?

[gaearon]

Oh, I just mean adding another top-level guide for "Testing Components" to the Advanced section in the sidebar (which already has "Optimizing Performance", "React without JSX", etc).