Jest: Add Product Showcase to Homepage

[hramos]

Based on previous discussion in #2625. Specifically, this issue covers this feature request:

Instead of the 10 items in "Jest's Testing Features" we should have screenshots and make it a product showcase. If we hold off on the website launch for another week, I can help do that.

[hramos]

These are the existing items under Jest's Testing Features:

• [ ] Fast interactive mode with --watch.
• [ ] Create coverage reports with --coverage. No additional setup or libraries needed!
• [ ] Automatically find tests related to changed files to execute in your project with --onlyChanged.
• [ ] Error messages are helpful and color coded. Stack traces point to the source of problems quickly.
• [ ] Jest runs previously failed tests first. Together with --bail it provides useful signal quickly.
• [ ] Sandboxed test files and automatic global state resets for every test.
• [ ] Integrated support for testing with promises and async/await
• [ ] Run your tests within a fake DOM implementation (via jsdom) on the command line.
• [ ] Run tests in parallel processes to minimize test runtime.
• [ ] Jest works with any compile-to-JS language and integrates seamlessly with Babel.
• [ ] Integrated manual mocking library.
• [ ] Can run asynchronous code synchronously.

Let's aim for 7 features to highlight in the homepage.

[cpojer]

Ok, here is my shortlist after the three pillars that already mention important features (like the watch mode):

• Inbuilt code coverage
• "zero-config"
• Powerful mocking library for functions and modules
• Sandboxed test files
• Browser mocks through jsdom
• Works with any compile-to-JS language

[hramos]

Here's a preview of what I have so far. Copy still needs to be worked on, and we'll need screenshots to go along with each feature. At this point I'm focusing on getting the homepage layout to look right.

[thymikee]

We could mix light and dark-themed terminals, just to show that it looks great on both worlds, what do you think?

Here's a screenshot for Snapshot example:

[thymikee]

I think this one could also land somewhere, e.g. in "Sandboxed and Fast"

[cpojer]

Great idea @thymikee. What I care about is having the same font and terminal size for those windows. If @hramos tells me exactly what screenshots he wants to have, I can provide :)

[thymikee]

Consistency wins!

[hramos]

This is now in master, though we need to update the screenshots as these are currently placeholders. @cpojer can you create screenshots for the following? The placeholder I am using is at https://github.com/facebook/jest/blob/master/website/src/jest/img/content/feature-snapshot-tests.png - if you can make sure they're at least as big as the placeholder they should work great.

• [ ] Sandboxed and fast: Sandboxed test files and automatic global state resets for every test. Jest parallelizes test runs across workers to maximize performance. Console messages are buffered and printed together with test results.

• [ ] Built-in code coverage reports: Easily create code coverage reports using --coverage. No additional setup or libraries needed! Jest can collect code coverage information from entire projects, including untested files.

• [ ] Zero configuration: Jest is already configured when you use create-react-app or react-native init to create your React and React Native projects. Place your tests in a __tests__ folder, or name your test files with a .spec.js or .test.js extension. Whatever you prefer, Jest will find and run your tests.

• [ ] Powerful mocking library: Powerful mocking library for functions and modules. Mock React Native components using jest-react-native.

• [ ] Works with TypeScript: Jest works with any compile-to-JavaScript language and integrates seamlessly with Babel.

• [ ] Simulated DOM environment: Run your tests within a fake DOM implementation on the command line. Every DOM API that you call can be observed in the same way it would be observed in a browser.