diff --git a/.eslintrc.json b/.eslintrc.json index e9d42f59b9b3f..67688eb61c20e 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -21,6 +21,7 @@ } }, "overrides": [ + { "files": ["**/__tests__/**"], "env": { "jest": true } }, { "files": ["**/*.ts", "**/*.tsx"], "parser": "@typescript-eslint/parser", diff --git a/examples/with-jest-flow/.babelrc b/examples/with-jest-flow/.babelrc deleted file mode 100644 index 53d70241c5c66..0000000000000 --- a/examples/with-jest-flow/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": [ - "next/babel" - ], - "plugins": [ - "transform-flow-strip-types" - ] -} \ No newline at end of file diff --git a/examples/with-jest-flow/.eslintrc.json b/examples/with-jest-flow/.eslintrc.json deleted file mode 100644 index 8dafe48e32539..0000000000000 --- a/examples/with-jest-flow/.eslintrc.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "parser": "babel-eslint" -} diff --git a/examples/with-jest-flow/.flowconfig b/examples/with-jest-flow/.flowconfig deleted file mode 100644 index 6d3139d54da9a..0000000000000 --- a/examples/with-jest-flow/.flowconfig +++ /dev/null @@ -1,8 +0,0 @@ -[ignore] -.*/node_modules/* - -[include] - -[libs] - -[options] diff --git a/examples/with-jest-flow/README.md b/examples/with-jest-flow/README.md deleted file mode 100644 index 801f6874a6762..0000000000000 --- a/examples/with-jest-flow/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# Example app with Jest tests and [Flow](https://flowtype.org/) - -This example features an app with jest tests and the [Flow](https://flowtype.org/) static type checker, with the transform-flow-strip-types babel plugin stripping flow type annotations from your output code. - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](/~https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init next-app --example with-jest-flow with-jest-flow-app -# or -yarn create next-app --example with-jest-flow with-jest-flow-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-flow -cd with-jest-flow -``` - -Install it and run: - -```bash -npm install -npm run dev -# or -yarn -yarn dev -``` - -## Run Jest tests - -```bash -npm run test -# or -yarn test -``` diff --git a/examples/with-jest-flow/__tests__/__snapshots__/index.test.js.snap b/examples/with-jest-flow/__tests__/__snapshots__/index.test.js.snap deleted file mode 100644 index 8c931b4bc41b7..0000000000000 --- a/examples/with-jest-flow/__tests__/__snapshots__/index.test.js.snap +++ /dev/null @@ -1,9 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`With Snapshot Testing App shows "Hello World" 1`] = ` -
-
- Hello World -
-
-`; diff --git a/examples/with-jest-flow/__tests__/index.test.js b/examples/with-jest-flow/__tests__/index.test.js deleted file mode 100644 index b63d8158677d1..0000000000000 --- a/examples/with-jest-flow/__tests__/index.test.js +++ /dev/null @@ -1,23 +0,0 @@ -/* eslint-env jest */ - -import { shallow } from 'enzyme' -import React from 'react' -import renderer from 'react-test-renderer' - -import App from '../pages/index.js' - -describe('With Enzyme', () => { - it('App shows "Hello World"', () => { - const app = shallow() - - expect(app.find('div').text()).toEqual('Hello World') - }) -}) - -describe('With Snapshot Testing', () => { - it('App shows "Hello World"', () => { - const component = renderer.create() - const tree = component.toJSON() - expect(tree).toMatchSnapshot() - }) -}) diff --git a/examples/with-jest-flow/components/Page.js b/examples/with-jest-flow/components/Page.js deleted file mode 100644 index 783e3bb20c800..0000000000000 --- a/examples/with-jest-flow/components/Page.js +++ /dev/null @@ -1,17 +0,0 @@ -// @flow -import React, { type Node } from 'react' -import Head from 'next/head' - -type Props = { - children: Node, - title?: string, -} - -export default ({ children, title = 'This is the default title' }: Props) => ( -
- - {title} - - {children} -
-) diff --git a/examples/with-jest-flow/flow-typed/next.js.flow b/examples/with-jest-flow/flow-typed/next.js.flow deleted file mode 100644 index 102b81a5d5010..0000000000000 --- a/examples/with-jest-flow/flow-typed/next.js.flow +++ /dev/null @@ -1,35 +0,0 @@ -// @flow - -declare module "next" { - declare type NextApp = { - prepare(): Promise; - getRequestHandler(): any; - render(req: any, res: any, pathname: string, query: any): any; - renderToHTML(req: any, res: any, pathname: string, query: string): string; - renderError(err: Error, req: any, res: any, pathname: any, query: any): any; - renderErrorToHTML(err: Error, req: any, res: any, pathname: string, query: any): string; - }; - declare module.exports: (...opts: any) => NextApp -} - -declare module "next/head" { - declare module.exports: Class>; -} - -declare module "next/link" { - declare module.exports: Class>; -} - -declare module "next/error" { - declare module.exports: Class>; -} - -declare module "next/document" { - declare export var Head: Class>; - declare export var Main: Class>; - declare export var NextScript: Class>; - declare export default Class> & { - getInitialProps: (ctx: {pathname: string, query: any, req?: any, res?: any, err?: any}) => Promise; - renderPage(cb: Function): void; - }; -} diff --git a/examples/with-jest-flow/jest.config.js b/examples/with-jest-flow/jest.config.js deleted file mode 100644 index 50636149295f6..0000000000000 --- a/examples/with-jest-flow/jest.config.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - setupFiles: ['/jest.setup.js'], - testPathIgnorePatterns: ['/.next/', '/node_modules/'], -} diff --git a/examples/with-jest-flow/jest.setup.js b/examples/with-jest-flow/jest.setup.js deleted file mode 100644 index 3d6cd1d53a114..0000000000000 --- a/examples/with-jest-flow/jest.setup.js +++ /dev/null @@ -1,4 +0,0 @@ -import { configure } from 'enzyme' -import Adapter from 'enzyme-adapter-react-16' - -configure({ adapter: new Adapter() }) diff --git a/examples/with-jest-flow/package.json b/examples/with-jest-flow/package.json deleted file mode 100644 index 50824564818c0..0000000000000 --- a/examples/with-jest-flow/package.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "name": "with-jest-flow", - "version": "1.0.0", - "scripts": { - "test": "jest", - "dev": "next", - "build": "next build", - "flow": "flow", - "start": "next start" - }, - "dependencies": { - "next": "latest", - "react": "latest", - "react-dom": "latest" - }, - "devDependencies": { - "@babel/core": "latest", - "babel-eslint": "latest", - "babel-jest": "latest", - "babel-plugin-transform-flow-strip-types": "latest", - "enzyme": "latest", - "enzyme-adapter-react-16": "latest", - "eslint": "latest", - "flow-bin": "latest", - "jest": "latest", - "react-addons-test-utils": "latest", - "react-test-renderer": "latest" - } -} diff --git a/examples/with-jest-flow/pages/index.js b/examples/with-jest-flow/pages/index.js deleted file mode 100644 index ee442ef802eb3..0000000000000 --- a/examples/with-jest-flow/pages/index.js +++ /dev/null @@ -1,9 +0,0 @@ -// @flow -import React from 'react' -import Page from '../components/Page' - -export default () => ( - -
Hello World
- -) diff --git a/examples/with-jest-react-testing-library/.babelrc b/examples/with-jest-react-testing-library/.babelrc deleted file mode 100644 index 1ff94f7ed28e1..0000000000000 --- a/examples/with-jest-react-testing-library/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["next/babel"] -} diff --git a/examples/with-jest-react-testing-library/README.md b/examples/with-jest-react-testing-library/README.md deleted file mode 100644 index 16da585ef9777..0000000000000 --- a/examples/with-jest-react-testing-library/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# Example app with React Testing Library and Jest - -This example features an app with [react testing library](/~https://github.com/kentcdodds/react-testing-library) by [Kent Dodds](/~https://github.com/kentcdodds/). 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. - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](/~https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init 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-react-testing-library -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 -``` diff --git a/examples/with-jest-react-testing-library/__tests__/__snapshots__/index.test.js.snap b/examples/with-jest-react-testing-library/__tests__/__snapshots__/index.test.js.snap deleted file mode 100644 index e804d4bc7e506..0000000000000 --- a/examples/with-jest-react-testing-library/__tests__/__snapshots__/index.test.js.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`With React Testing Library Snapshot Should match Snapshot 1`] = ` - -
-

- Hello World! -

-
- -`; diff --git a/examples/with-jest-react-testing-library/__tests__/index.test.js b/examples/with-jest-react-testing-library/__tests__/index.test.js deleted file mode 100644 index 7342d03f4ffd1..0000000000000 --- a/examples/with-jest-react-testing-library/__tests__/index.test.js +++ /dev/null @@ -1,22 +0,0 @@ -/* eslint-env jest */ - -import React from 'react' -import { render } from '@testing-library/react' - -import App from '../pages/index.js' - -describe('With React Testing Library', () => { - it('Shows "Hello world!"', () => { - const { getByText } = render() - - expect(getByText('Hello World!')).not.toBeNull() - }) -}) - -describe('With React Testing Library Snapshot', () => { - it('Should match Snapshot', () => { - const { asFragment } = render() - - expect(asFragment()).toMatchSnapshot() - }) -}) diff --git a/examples/with-jest-react-testing-library/jest.config.js b/examples/with-jest-react-testing-library/jest.config.js deleted file mode 100644 index 5ea24c9c24552..0000000000000 --- a/examples/with-jest-react-testing-library/jest.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - testPathIgnorePatterns: ['/.next/', '/node_modules/'], -} diff --git a/examples/with-jest-react-testing-library/package.json b/examples/with-jest-react-testing-library/package.json deleted file mode 100644 index b8d173e566596..0000000000000 --- a/examples/with-jest-react-testing-library/package.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "name": "with-jest-react-testing-library", - "version": "1.0.0", - "dependencies": { - "next": "latest", - "react": "^16.11.0", - "react-dom": "^16.11.0" - }, - "devDependencies": { - "@babel/core": "7.6.4", - "@testing-library/react": "9.3.2", - "babel-jest": "24.9.0", - "jest": "24.9.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 deleted file mode 100644 index 92448923a8603..0000000000000 --- a/examples/with-jest-react-testing-library/pages/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export default () => ( -
-

Hello World!

-
-) diff --git a/examples/with-jest-typescript/.babelrc b/examples/with-jest-typescript/.babelrc deleted file mode 100644 index 1ff94f7ed28e1..0000000000000 --- a/examples/with-jest-typescript/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["next/babel"] -} diff --git a/examples/with-jest-typescript/README.md b/examples/with-jest-typescript/README.md deleted file mode 100644 index 285c0755c5d50..0000000000000 --- a/examples/with-jest-typescript/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# Example app with Jest tests inside a NextJS TypeScript app - -This example shows a configuration and several examples for a running Jest tests in a NextJS TypeScript app. - -## How to use - -### Using `create-next-app` - -Execute [`create-next-app`](/~https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npm init next-app --example with-jest-typescript with-jest-typescript-app -# or -yarn create next-app --example with-jest-typescript with-jest-typescript-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-typescript -cd with-jest-typescript -``` - -Install it and run: - -```bash -npm install -npm run dev -# or -yarn -yarn dev -``` - -## Run Jest tests - -```bash -npm run test -# or -yarn test -``` diff --git a/examples/with-jest-typescript/jest.config.js b/examples/with-jest-typescript/jest.config.js deleted file mode 100644 index 7fa462816387d..0000000000000 --- a/examples/with-jest-typescript/jest.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - setupFiles: ['/jest.setup.js'], -} diff --git a/examples/with-jest-typescript/jest.setup.js b/examples/with-jest-typescript/jest.setup.js deleted file mode 100644 index 79ef380fee9ec..0000000000000 --- a/examples/with-jest-typescript/jest.setup.js +++ /dev/null @@ -1,4 +0,0 @@ -const Enzyme = require('enzyme') -const Adapter = require('enzyme-adapter-react-16') - -Enzyme.configure({ adapter: new Adapter() }) diff --git a/examples/with-jest-typescript/next-env.d.ts b/examples/with-jest-typescript/next-env.d.ts deleted file mode 100644 index 7b7aa2c7727d8..0000000000000 --- a/examples/with-jest-typescript/next-env.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -/// -/// diff --git a/examples/with-jest-typescript/package.json b/examples/with-jest-typescript/package.json deleted file mode 100644 index 6c50623310590..0000000000000 --- a/examples/with-jest-typescript/package.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "name": "with-jest-typescript", - "version": "1.0.0", - "scripts": { - "test": "jest", - "dev": "next", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "next": "latest", - "react": "^16.8.4", - "react-dom": "^16.8.4" - }, - "devDependencies": { - "@types/jest": "^24.0.23", - "@types/react": "^16.8.8", - "@types/react-dom": "^16.8.2", - "babel-core": "^6.26.3", - "babel-jest": "^24.9.0", - "enzyme": "^3.9.0", - "enzyme-adapter-react-16": "^1.11.2", - "jest": "^24.9.0", - "react-addons-test-utils": "^15.6.2", - "react-test-renderer": "^16.8.4", - "typescript": "^3.3.3333" - } -} diff --git a/examples/with-jest-typescript/pages/cars.tsx b/examples/with-jest-typescript/pages/cars.tsx deleted file mode 100644 index 32ca8e25a18dd..0000000000000 --- a/examples/with-jest-typescript/pages/cars.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import CarsOverview from '../src/modules/cars/Overview' - -const CarsPage = () => - -export default CarsPage diff --git a/examples/with-jest-typescript/pages/index.tsx b/examples/with-jest-typescript/pages/index.tsx deleted file mode 100644 index 5ade772248f55..0000000000000 --- a/examples/with-jest-typescript/pages/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -const IndexPage = () => ( -

Testing Next.js App written in TypeScript with Jest

-) - -export default IndexPage diff --git a/examples/with-jest-typescript/pages/login.tsx b/examples/with-jest-typescript/pages/login.tsx deleted file mode 100644 index 0c76839a491a2..0000000000000 --- a/examples/with-jest-typescript/pages/login.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import Login from '../src/modules/auth/Login' - -const LoginPage = () => - -export default LoginPage diff --git a/examples/with-jest-typescript/src/components/NiceCheckbox/index.tsx b/examples/with-jest-typescript/src/components/NiceCheckbox/index.tsx deleted file mode 100644 index bdf9a28e785d5..0000000000000 --- a/examples/with-jest-typescript/src/components/NiceCheckbox/index.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react' - -interface NiceCheckboxProps { - rootID: string - id: string - name: string - value: string - label: string -} - -const NiceCheckbox: React.SFC = ( - props: NiceCheckboxProps -): JSX.Element => { - return ( -
- - -
- ) -} - -export default NiceCheckbox diff --git a/examples/with-jest-typescript/src/components/NiceCheckbox/test.tsx b/examples/with-jest-typescript/src/components/NiceCheckbox/test.tsx deleted file mode 100644 index c32a5dfbab582..0000000000000 --- a/examples/with-jest-typescript/src/components/NiceCheckbox/test.tsx +++ /dev/null @@ -1,25 +0,0 @@ -/* eslint-env jest */ -import React from 'react' -import { shallow } from 'enzyme' - -import NiceCheckbox from './index' - -describe('NiceCheckbox', () => { - it('renders the checkbox with correct label', () => { - const wrapper = shallow( - - ) - expect( - wrapper - .find('#NiceCarCheckbox') - .find('label') - .text() - ).toEqual('Is this car available?') - }) -}) diff --git a/examples/with-jest-typescript/src/modules/auth/Login.tsx b/examples/with-jest-typescript/src/modules/auth/Login.tsx deleted file mode 100644 index ed1b10184d46a..0000000000000 --- a/examples/with-jest-typescript/src/modules/auth/Login.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React, { ChangeEvent } from 'react' -import Router from 'next/router' - -import * as T from './types' - -export interface LoginProps {} - -export interface LoginState { - credentials: T.LoginCredentials - isLoginLoading: boolean -} - -export default class Login extends React.Component { - constructor(props: LoginProps) { - super(props) - - this.state = { - isLoginLoading: false, - credentials: { - email: null, - password: null, - }, - } - } - - handleCredentialsChange = (e: ChangeEvent) => { - let { credentials } = this.state - credentials[e.target.name] = e.target.value - - this.setState({ credentials }) - } - - handleLoginSubmit = (e: React.MouseEvent) => { - e.preventDefault() - this.setState({ isLoginLoading: true }) - - setTimeout(() => { - this.setState({ isLoginLoading: false }) - Router.replace('/cars') - }, 500) - } - - render() { - const { credentials } = this.state - - return ( -
-

Login

-
- - - - -
-
- ) - } -} diff --git a/examples/with-jest-typescript/src/modules/auth/__tests__/Login.test.tsx b/examples/with-jest-typescript/src/modules/auth/__tests__/Login.test.tsx deleted file mode 100644 index 87bbdfa8ad00e..0000000000000 --- a/examples/with-jest-typescript/src/modules/auth/__tests__/Login.test.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/* eslint-env jest */ -import React from 'react' -import { shallow } from 'enzyme' - -import Login from './../Login' - -describe('Login', () => { - it('renders the h1 title', () => { - const login = shallow() - expect(login.find('h1').text()).toEqual('Login') - }) - - it('renders the form', () => { - const login = shallow() - expect(login.find('form')).toHaveLength(1) - }) - - it('changes the text of email', () => { - const login = shallow() - login.find('#formEmail').simulate('change', { - target: { - name: 'email', - value: 'some@test.com', - }, - }) - expect( - login - .update() - .find('#formEmail') - .props().value - ).toEqual('some@test.com') - }) - - it('changes the text of login button after clicking it', () => { - const login = shallow() - login.find('#loginSubmit').simulate('click', { preventDefault() {} }) - expect( - login - .update() - .find('#loginSubmit') - .text() - ).toEqual('Logging in...') - }) -}) diff --git a/examples/with-jest-typescript/src/modules/auth/types.ts b/examples/with-jest-typescript/src/modules/auth/types.ts deleted file mode 100644 index 36dc07076a31f..0000000000000 --- a/examples/with-jest-typescript/src/modules/auth/types.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface LoginCredentials { - email: string - password: string -} diff --git a/examples/with-jest-typescript/src/modules/cars/Detail.tsx b/examples/with-jest-typescript/src/modules/cars/Detail.tsx deleted file mode 100644 index a6b5755093766..0000000000000 --- a/examples/with-jest-typescript/src/modules/cars/Detail.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react' - -import * as T from './types' - -interface DetailProps { - car: T.Car -} - -const Detail: React.SFC = ({ car }: DetailProps) => { - return ( -
-

{`${car.make} ${car.model}`}

-

Engine : {car.engine}

-

Year : {car.year}

-

Mileage : {car.mileage}

-

Equipment :

-
    - {car.equipment && - car.equipment.map((e: string, index: number) => ( -
  • {e}
    • - ))} -
-
- ) -} - -export default Detail diff --git a/examples/with-jest-typescript/src/modules/cars/Overview.tsx b/examples/with-jest-typescript/src/modules/cars/Overview.tsx deleted file mode 100644 index c9b74515c36fd..0000000000000 --- a/examples/with-jest-typescript/src/modules/cars/Overview.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import * as React from 'react' - -import * as T from './types' - -export interface CarsOverviewProps { - cars?: T.CarList -} - -export interface CarsOverviewState { - selectedCar: T.Car -} - -export default class CarsOverview extends React.Component< - CarsOverviewProps, - CarsOverviewState -> { - constructor(props: CarsOverviewProps) { - super(props) - - this.state = { - selectedCar: null, - } - } - - handleSelectCar = (car: T.Car): void => { - this.setState({ selectedCar: car }) - } - - renderCarsList = (cars?: T.CarList): JSX.Element => { - if (!cars || cars.length === 0) { - return

No cars

- } - - return ( -
    - {cars.map( - (car: T.Car, index: number): JSX.Element => ( -
  • this.handleSelectCar(car)}> - {car.make} {car.model} -
    • - ) - )} -
- ) - } - - renderCarInfo = (car: T.Car): JSX.Element => { - if (!car) { - return null - } - - return ( -
-

{`${car.make} ${car.model}`}

-
{car.engine}
-
- ) - } - - render() { - return ( -
-

Cars Overview

- -
{this.renderCarsList(this.props.cars)}
- - {this.renderCarInfo(this.state.selectedCar)} -
- ) - } -} diff --git a/examples/with-jest-typescript/src/modules/cars/__tests__/Detail.test.tsx b/examples/with-jest-typescript/src/modules/cars/__tests__/Detail.test.tsx deleted file mode 100644 index 7d81cc149711d..0000000000000 --- a/examples/with-jest-typescript/src/modules/cars/__tests__/Detail.test.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/* eslint-env jest */ -import React from 'react' -import { shallow } from 'enzyme' - -import Detail from './../Detail' - -const __CAR__ = { - make: 'Volvo', - model: 'XC60', - engine: 'T5', - year: 2018, - mileage: 123, - equipment: ['Leather', 'Seat heating', 'City Safety'], -} - -describe('Car detail', () => { - it('renders correct title', () => { - const detail = shallow() - expect(detail.find('h1').text()).toEqual('Volvo XC60') - }) - - it('renders correct list item', () => { - const detail = shallow() - expect(detail.childAt(1).text()).toEqual('Engine : T5') - }) - - it('renders correct equipment list item', () => { - const detail = shallow() - expect( - detail - .children() - .find('ul') - .childAt(1) - .text() - ).toEqual('Seat heating') - }) -}) diff --git a/examples/with-jest-typescript/src/modules/cars/__tests__/Overview.test.tsx b/examples/with-jest-typescript/src/modules/cars/__tests__/Overview.test.tsx deleted file mode 100644 index 196ab75786dc8..0000000000000 --- a/examples/with-jest-typescript/src/modules/cars/__tests__/Overview.test.tsx +++ /dev/null @@ -1,91 +0,0 @@ -/* eslint-env jest */ -import React from 'react' -import { shallow } from 'enzyme' - -import Overview from './../Overview' - -const __CARS__ = [ - { - make: 'Volvo', - model: 'C30', - engine: 'T5', - year: 2018, - mileage: 123, - equipment: ['Leather', 'Seat heating', 'City Safety'], - }, - { - make: 'Volvo', - model: 'XC60', - engine: 'D5', - year: 2018, - mileage: 456, - equipment: ['Leather', 'Seat heating', 'City Safety'], - }, - { - make: 'Volvo', - model: 'XC90', - engine: 'T6', - year: 2018, - mileage: 789, - equipment: ['Leather', 'Seat heating', 'City Safety'], - }, -] - -describe('Cars overview', () => { - it('renders the h1 title', () => { - const overview = shallow() - expect(overview.find('h1').text()).toEqual('Cars Overview') - }) - - it('renders empty cars list when no cars are provided', () => { - const overview = shallow() - expect( - overview - .find('.Cars__List') - .children() - .find('p') - .text() - ).toEqual('No cars') - }) - - it('renders cars list with 3 items when 3 cars are provided', () => { - const overview = shallow() - expect( - overview - .find('.Cars__List') - .children() - .find('ul') - .children() - ).toHaveLength(3) - }) - - it('renders cars list with the expected item on third place', () => { - const overview = shallow() - expect( - overview - .find('.Cars__List') - .children() - .find('ul') - .childAt(2) - .text() - ).toEqual('Volvo XC90') - }) - - it('renders car detail after clicking on an item in cars list', () => { - const overview = shallow() - overview - .find('.Cars__List') - .children() - .find('ul') - .childAt(1) - .simulate('click', { preventDefault() {} }) - - expect( - overview - .update() - .find('.CarInfo') - .find('h2') - .text() - ).toEqual('Volvo XC60') - }) -}) diff --git a/examples/with-jest-typescript/src/modules/cars/types.ts b/examples/with-jest-typescript/src/modules/cars/types.ts deleted file mode 100644 index 5a1ee5acad47e..0000000000000 --- a/examples/with-jest-typescript/src/modules/cars/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -export interface Car { - make: string - model: string - engine: string - year: number - mileage: number - equipment: string[] -} - -export type CarList = Array diff --git a/examples/with-jest-typescript/tsconfig.json b/examples/with-jest-typescript/tsconfig.json deleted file mode 100644 index 14dfe3ff95d48..0000000000000 --- a/examples/with-jest-typescript/tsconfig.json +++ /dev/null @@ -1,34 +0,0 @@ -{ - "compileOnSave": false, - "compilerOptions": { - "target": "esnext", - "module": "esnext", - "jsx": "preserve", - "allowJs": true, - "moduleResolution": "node", - "allowSyntheticDefaultImports": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "removeComments": false, - "preserveConstEnums": true, - "sourceMap": true, - "skipLibCheck": true, - "baseUrl": ".", - "typeRoots": ["./node_modules/@types"], - "lib": ["dom", "es2015", "es2016"], - "strict": false, - "forceConsistentCasingInFileNames": true, - "noEmit": true, - "esModuleInterop": true, - "resolveJsonModule": true, - "isolatedModules": true - }, - "exclude": [ - "node_modules", - "**/*.spec.ts", - "**/*.spec.tsx", - "**/*.test.ts", - "**/*.test.tsx" - ], - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] -} diff --git a/examples/with-jest/.eslintrc b/examples/with-jest/.eslintrc deleted file mode 100644 index 55f121d152d4f..0000000000000 --- a/examples/with-jest/.eslintrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "env": { - "jest": true - } -} diff --git a/examples/with-jest/README.md b/examples/with-jest/README.md index 74c3c84fc0d21..00ec3dfe91e2d 100644 --- a/examples/with-jest/README.md +++ b/examples/with-jest/README.md @@ -1,42 +1,21 @@ -# Example app with Jest tests +# Next.js + Jest -This example features an app with jest tests. +This example shows how to configure Jest to work with Next.js. -## How to use +This includes Next.js' built-in support for Global CSS, CSS Modules, and TypeScript! -### Using `create-next-app` +## How to Use -Execute [`create-next-app`](/~https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: +Quickly get started using [Create Next App](/~https://github.com/zeit/next.js/tree/canary/packages/create-next-app#readme)! -```bash -npm init next-app --example with-jest with-jest-app -# or -yarn create next-app --example with-jest with-jest-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 -``` - -Install it and run: +In your terminal, run the following command: ```bash -npm install -npm run dev -# or -yarn -yarn dev +npx create-next-app --example with-jest ``` -## Run Jest tests +## Run Jest Tests ```bash -npm run test -# or -yarn test +npm test ``` diff --git a/examples/with-jest/__tests__/__snapshots__/index.test.js.snap b/examples/with-jest/__tests__/__snapshots__/index.test.js.snap deleted file mode 100644 index f2f9870222723..0000000000000 --- a/examples/with-jest/__tests__/__snapshots__/index.test.js.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`With Snapshot Testing App shows "Hello world!" 1`] = ` -
-

- Hello World! -

-
-`; diff --git a/examples/with-jest/__tests__/__snapshots__/snapshot.js.snap b/examples/with-jest/__tests__/__snapshots__/snapshot.js.snap new file mode 100644 index 0000000000000..523644d734cab --- /dev/null +++ b/examples/with-jest/__tests__/__snapshots__/snapshot.js.snap @@ -0,0 +1,89 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders homepage unchanged 1`] = ` + +`; diff --git a/examples/with-jest/__tests__/index.test.js b/examples/with-jest/__tests__/index.test.js deleted file mode 100644 index fda0f959494cc..0000000000000 --- a/examples/with-jest/__tests__/index.test.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -import { shallow } from 'enzyme' -import renderer from 'react-test-renderer' - -import App from '../pages/index' - -describe('With Enzyme', () => { - it('App shows "Hello world!"', () => { - const app = shallow() - - expect(app.find('p').text()).toEqual('Hello World!') - }) -}) - -describe('With Snapshot Testing', () => { - it('App shows "Hello world!"', () => { - const component = renderer.create() - const tree = component.toJSON() - expect(tree).toMatchSnapshot() - }) -}) diff --git a/examples/with-jest/__tests__/snapshot.js b/examples/with-jest/__tests__/snapshot.js new file mode 100644 index 0000000000000..2d822e8718904 --- /dev/null +++ b/examples/with-jest/__tests__/snapshot.js @@ -0,0 +1,8 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import Index from '../pages/index' + +it('renders homepage unchanged', () => { + const tree = renderer.create().toJSON() + expect(tree).toMatchSnapshot() +}) diff --git a/examples/with-jest/__tests__/testing-library.js b/examples/with-jest/__tests__/testing-library.js new file mode 100644 index 0000000000000..1c5e1bfd87556 --- /dev/null +++ b/examples/with-jest/__tests__/testing-library.js @@ -0,0 +1,11 @@ +import React from 'react' +import { render } from '@testing-library/react' +import Index from '../pages/index' + +test('renders deploy link', () => { + const { getByText } = render() + const linkElement = getByText( + /Instantly deploy your Next\.js site to a public URL with ZEIT Now\./ + ) + expect(linkElement).toBeInTheDocument() +}) diff --git a/examples/with-jest/config/jest/cssTransform.js b/examples/with-jest/config/jest/cssTransform.js new file mode 100644 index 0000000000000..24f38118fcdb6 --- /dev/null +++ b/examples/with-jest/config/jest/cssTransform.js @@ -0,0 +1,8 @@ +module.exports = { + process() { + return 'module.exports = {};' + }, + getCacheKey() { + return 'cssTransform' + }, +} diff --git a/examples/with-jest/jest.config.js b/examples/with-jest/jest.config.js index 50636149295f6..3863e5c0490db 100644 --- a/examples/with-jest/jest.config.js +++ b/examples/with-jest/jest.config.js @@ -1,4 +1,20 @@ module.exports = { - setupFiles: ['/jest.setup.js'], - testPathIgnorePatterns: ['/.next/', '/node_modules/'], + collectCoverageFrom: [ + '**/*.{js,jsx,ts,tsx}', + '!**/*.d.ts', + '!**/node_modules/**', + ], + setupFilesAfterEnv: ['/setupTests.js'], + testPathIgnorePatterns: ['/node_modules/', '/.next/'], + transform: { + '^.+\\.(js|jsx|ts|tsx)$': '/node_modules/babel-jest', + '^.+\\.css$': '/config/jest/cssTransform.js', + }, + transformIgnorePatterns: [ + '/node_modules/', + '^.+\\.module\\.(css|sass|scss)$', + ], + moduleNameMapper: { + '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy', + }, } diff --git a/examples/with-jest/jest.setup.js b/examples/with-jest/jest.setup.js deleted file mode 100644 index 3d6cd1d53a114..0000000000000 --- a/examples/with-jest/jest.setup.js +++ /dev/null @@ -1,4 +0,0 @@ -import { configure } from 'enzyme' -import Adapter from 'enzyme-adapter-react-16' - -configure({ adapter: new Adapter() }) diff --git a/examples/with-jest/package.json b/examples/with-jest/package.json index 8e726b971b812..25a6fa4b0f909 100644 --- a/examples/with-jest/package.json +++ b/examples/with-jest/package.json @@ -1,21 +1,24 @@ { "name": "with-jest", - "version": "1.0.0", + "version": "0.1.0", + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "test": "jest --watch", + "test:ci": "jest --ci" + }, "dependencies": { - "next": "9.1.4", + "next": "latest", "react": "16.12.0", "react-dom": "16.12.0" }, "devDependencies": { - "enzyme": "3.10.0", - "enzyme-adapter-react-16": "1.15.1", - "jest": "24.9.0", - "react-test-renderer": "16.12.0" - }, - "scripts": { - "test": "jest", - "dev": "next", - "build": "next build", - "start": "next start" + "@testing-library/jest-dom": "^5.1.0", + "@testing-library/react": "^9.4.0", + "babel-jest": "^25.1.0", + "identity-obj-proxy": "^3.0.0", + "jest": "^25.1.0", + "react-test-renderer": "^16.12.0" } } diff --git a/examples/with-jest/pages/_app.js b/examples/with-jest/pages/_app.js new file mode 100644 index 0000000000000..d5694127266f2 --- /dev/null +++ b/examples/with-jest/pages/_app.js @@ -0,0 +1,6 @@ +import '../styles/global.css' + +// This default export is required in a new `pages/_app.js` file. +export default function MyApp({ Component, pageProps }) { + return +} diff --git a/examples/with-jest/pages/index.js b/examples/with-jest/pages/index.js index 2c38a6d265060..c12de54c6a618 100644 --- a/examples/with-jest/pages/index.js +++ b/examples/with-jest/pages/index.js @@ -1,10 +1,57 @@ -export default () => ( -
- -

Hello World!

+import Head from 'next/head' +import React from 'react' +import styles from './index.module.css' + +const Home = () => ( + ) + +export default Home diff --git a/examples/with-jest/pages/index.module.css b/examples/with-jest/pages/index.module.css new file mode 100644 index 0000000000000..d6754a34ab1df --- /dev/null +++ b/examples/with-jest/pages/index.module.css @@ -0,0 +1,82 @@ +.container { + min-height: 100vh; + padding: 0 0.5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.title a { + color: #0070f3; + text-decoration: none; +} + +.title a:hover, +.title a:focus, +.title a:active { + text-decoration: underline; +} + +.title { + margin: 0; + line-height: 1.15; + font-size: 4rem; +} + +.title, +.description { + text-align: center; +} + +.description { + line-height: 1.5; + font-size: 1.5rem; +} + +.grid { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + + max-width: 800px; + margin-top: 3rem; +} + +.card { + margin: 1rem; + flex-basis: 45%; + padding: 1.5rem; + text-align: left; + color: inherit; + text-decoration: none; + border: 1px solid #eaeaea; + border-radius: 10px; + transition: color 0.15s ease, border-color 0.15s ease; +} + +.card:hover, +.card:focus, +.card:active { + color: #0070f3; + border-color: #0070f3; +} + +.card h3 { + margin: 0 0 1rem 0; + font-size: 1.5rem; +} + +.card p { + margin: 0; + font-size: 1.25rem; + line-height: 1.5; +} + +@media (max-width: 600px) { + .grid { + width: 100%; + flex-direction: column; + } +} diff --git a/examples/with-jest/public/favicon.ico b/examples/with-jest/public/favicon.ico new file mode 100644 index 0000000000000..4965832f2c9b0 Binary files /dev/null and b/examples/with-jest/public/favicon.ico differ diff --git a/examples/with-jest/public/zeit.svg b/examples/with-jest/public/zeit.svg new file mode 100644 index 0000000000000..b4a5a94a412c0 --- /dev/null +++ b/examples/with-jest/public/zeit.svg @@ -0,0 +1,11 @@ + + + + + + + + + + diff --git a/examples/with-jest/setupTests.js b/examples/with-jest/setupTests.js new file mode 100644 index 0000000000000..5aa7dfce10a7e --- /dev/null +++ b/examples/with-jest/setupTests.js @@ -0,0 +1,6 @@ +// optional: configure or set up a testing framework before each test +// if you delete this file, remove `setupFilesAfterEnv` from `jest.config.js` + +// used for __tests__/testing-library.js +// learn more: /~https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom/extend-expect' diff --git a/examples/with-jest/styles/global.css b/examples/with-jest/styles/global.css new file mode 100644 index 0000000000000..0afcfbe32f1d0 --- /dev/null +++ b/examples/with-jest/styles/global.css @@ -0,0 +1,53 @@ +html, +body { + padding: 0; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; +} + +* { + box-sizing: border-box; +} + +main { + padding: 5rem 0; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +footer { + width: 100%; + height: 100px; + border-top: 1px solid #eaeaea; + display: flex; + justify-content: center; + align-items: center; +} + +footer img { + margin-left: 0.5rem; +} + +footer a { + display: flex; + justify-content: center; + align-items: center; +} + +a { + color: inherit; + text-decoration: none; +} + +code { + background: #fafafa; + border-radius: 5px; + padding: 0.75rem; + font-size: 1.1rem; + font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, + Bitstream Vera Sans Mono, Courier New, monospace; +}