From 61a5fed1bbc8f503f812ceb9048dd0c4dbcee77e Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Fri, 1 Sep 2017 05:28:18 +0800
Subject: [PATCH] jest: add react-test-renderer

---
 _sass/2017/markdown/code.scss |  4 ++--
 jest.md                       | 32 ++++++++++++++++++++++++--------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/_sass/2017/markdown/code.scss b/_sass/2017/markdown/code.scss
index 21000b5b4..9db980344 100644
--- a/_sass/2017/markdown/code.scss
+++ b/_sass/2017/markdown/code.scss
@@ -40,8 +40,8 @@
     transform: translate3d(0, 1px, 0);
     background: linear-gradient(
       to right,
-      rgba($base-c, 0.05) 25%,
-      rgba($base-c, 0));
+      mix($base-c, white, 5%) 25%,
+      white);
   }
 
   // Line highlight ranges
diff --git a/jest.md b/jest.md
index 980999ae8..8e9121617 100644
--- a/jest.md
+++ b/jest.md
@@ -202,20 +202,36 @@ See: [Async tutorial](http://facebook.github.io/jest/docs/en/tutorial-async.html
 ### Snapshots
 
 ```jsx
-const tree = renderer.create(
-  <Link page="http://www.facebook.com">Facebook</Link>
-).toJSON()
+it('works', () => {
+  const output = something()
+  expect(output).toMatchSnapshot()
+})
 ```
+{: data-line="3"}
+
+First run creates a snapshot. Subsequent runs match the saved snapshot.
+See: [Snapshot testing](http://facebook.github.io/jest/docs/en/snapshot-testing.html)
+
+### React test renderer
 
 ```jsx
-// First run creates a snapshot; subsequent runs match it
-expect(tree).toMatchSnapshot()
+import renderer from 'react-test-renderer'
 ```
+{: .-setup}
 
-```bash
-# To update snapshots
-jest --updateSnapshot
+```jsx
+it('works', () => {
+  const tree = renderer.create(
+    <Link page="http://www.facebook.com">Facebook</Link>
+  ).toJSON()
+
+  expect(tree).toMatchSnapshot()
+})
 ```
+{: data-line="2,3,4"}
+
+React's test renderer can be used for Jest snapshots.
+See: [Snapshot test](http://facebook.github.io/jest/docs/en/tutorial-react-native.html#snapshot-test)
 
 ### Mocks