From bdfa37cd4d1edb0b13b14ed5174912843ad4cfcf Mon Sep 17 00:00:00 2001
From: Jean <jeanbauer@users.noreply.github.com>
Date: Sun, 23 Dec 2018 20:23:16 -0200
Subject: [PATCH] Add react-testing-library example (#5940)

This example show how you can test Next.js apps with [react-testing-library](https://github.com/kentcdodds/react-testing-library).

This library encourages your applications to be more accessible and allows you to get your tests closer to using your components the way a user will, which allows your tests to give you more confidence that your application will work when a real user uses it. And also, is a replacement for enzyme.

<img width="733" alt="Image showing the words next.js + react testing library" src="https://user-images.githubusercontent.com/4689228/50387208-40223200-06de-11e9-9358-607092eb25a0.png">
---
 .../with-jest-react-testing-library/.babelrc  |  3 ++
 .../with-jest-react-testing-library/README.md | 51 +++++++++++++++++++
 .../__tests__/index.test.js                   | 14 +++++
 .../jest.config.js                            |  3 ++
 .../package.json                              | 19 +++++++
 .../pages/index.js                            |  5 ++
 6 files changed, 95 insertions(+)
 create mode 100644 examples/with-jest-react-testing-library/.babelrc
 create mode 100644 examples/with-jest-react-testing-library/README.md
 create mode 100644 examples/with-jest-react-testing-library/__tests__/index.test.js
 create mode 100644 examples/with-jest-react-testing-library/jest.config.js
 create mode 100644 examples/with-jest-react-testing-library/package.json
 create mode 100644 examples/with-jest-react-testing-library/pages/index.js

diff --git a/examples/with-jest-react-testing-library/.babelrc b/examples/with-jest-react-testing-library/.babelrc
new file mode 100644
index 00000000..1ff94f7e
--- /dev/null
+++ b/examples/with-jest-react-testing-library/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}
diff --git a/examples/with-jest-react-testing-library/README.md b/examples/with-jest-react-testing-library/README.md
new file mode 100644
index 00000000..89ece0e8
--- /dev/null
+++ b/examples/with-jest-react-testing-library/README.md
@@ -0,0 +1,51 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-jest-react-testing-library)
+
+# Example app with React Testing Library and Jest
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-jest-react-testing-library with-rtl-app
+# or
+yarn create next-app --example with-jest-react-testing-library with-rtl-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-jest
+cd with-jest-react-testing-library
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+## Run Tests
+
+```bash
+npm run test
+# or
+yarn test
+```
+
+## The idea behind the example
+
+This library encourages your applications to be more accessible and allows you to get your tests closer to using your components the way a user will, which allows your tests to give you more confidence that your application will work when a real user uses it. And also, is a replacement for enzyme.
+
+This example features:
+
+* An app with [react testing library](https://github.com/kentcdodds/react-testing-library) by [Kent Dodds](https://github.com/kentcdodds/)
+
diff --git a/examples/with-jest-react-testing-library/__tests__/index.test.js b/examples/with-jest-react-testing-library/__tests__/index.test.js
new file mode 100644
index 00000000..ecff441e
--- /dev/null
+++ b/examples/with-jest-react-testing-library/__tests__/index.test.js
@@ -0,0 +1,14 @@
+/* eslint-env jest */
+
+import React from 'react'
+import { render } from 'react-testing-library'
+
+import App from '../pages/index.js'
+
+describe('With React Testing Library', () => {
+  it('Shows "Hello world!"', () => {
+    const { getByText } = render(<App />)
+
+    expect(getByText('Hello World!')).not.toBeNull()
+  })
+})
diff --git a/examples/with-jest-react-testing-library/jest.config.js b/examples/with-jest-react-testing-library/jest.config.js
new file mode 100644
index 00000000..1563c76b
--- /dev/null
+++ b/examples/with-jest-react-testing-library/jest.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/']
+}
diff --git a/examples/with-jest-react-testing-library/package.json b/examples/with-jest-react-testing-library/package.json
new file mode 100644
index 00000000..e631f5bb
--- /dev/null
+++ b/examples/with-jest-react-testing-library/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "with-jest-react-testing-library",
+  "version": "1.0.0",
+  "dependencies": {
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "react-testing-library": "^5.4.2",
+    "jest": "^23.6.0"
+  },
+  "scripts": {
+    "test": "jest",
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  }
+}
diff --git a/examples/with-jest-react-testing-library/pages/index.js b/examples/with-jest-react-testing-library/pages/index.js
new file mode 100644
index 00000000..92448923
--- /dev/null
+++ b/examples/with-jest-react-testing-library/pages/index.js
@@ -0,0 +1,5 @@
+export default () => (
+  <div>
+    <p>Hello World!</p>
+  </div>
+)