1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

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">
This commit is contained in:
Jean 2018-12-23 20:23:16 -02:00 committed by Tim Neutkens
parent ec33b83843
commit bdfa37cd4d
6 changed files with 95 additions and 0 deletions

View file

@ -0,0 +1,3 @@
{
"presets": ["next/babel"]
}

View file

@ -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/)

View file

@ -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()
})
})

View file

@ -0,0 +1,3 @@
module.exports = {
testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/']
}

View file

@ -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"
}
}

View file

@ -0,0 +1,5 @@
export default () => (
<div>
<p>Hello World!</p>
</div>
)