From e66386b441be1e71b0360ebb842d1a0171dab5e8 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 14 Apr 2019 03:29:35 +0200 Subject: [PATCH] setup testing --- .eslintrc | 3 ++- .gitignore | 1 + jest.config.js | 18 ++++++++++++++++++ jest/__mocks__/file-mock.js | 1 + jest/__mocks__/gatsby.js | 26 ++++++++++++++++++++++++++ jest/jest-preprocess.js | 5 +++++ jest/loadershim.js | 3 +++ jest/setup-test-env.js | 4 ++++ package.json | 8 +++++++- src/components/atoms/Button.test.jsx | 19 +++++++++++++++++++ 10 files changed, 86 insertions(+), 2 deletions(-) create mode 100644 jest.config.js create mode 100644 jest/__mocks__/file-mock.js create mode 100644 jest/__mocks__/gatsby.js create mode 100644 jest/jest-preprocess.js create mode 100644 jest/loadershim.js create mode 100644 jest/setup-test-env.js create mode 100644 src/components/atoms/Button.test.jsx diff --git a/.eslintrc b/.eslintrc index 1591a93..4b66b72 100644 --- a/.eslintrc +++ b/.eslintrc @@ -16,7 +16,8 @@ "env": { "browser": true, "node": true, - "es6": true + "es6": true, + "jest": true }, "rules": { "quotes": ["error", "single"], diff --git a/.gitignore b/.gitignore index 7582dbc..6c99b9e 100644 --- a/.gitignore +++ b/.gitignore @@ -12,3 +12,4 @@ yarn.lock package-lock.json plugins/gatsby-plugin-matomo src/components/svg +coverage diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 0000000..8496ef9 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,18 @@ +module.exports = { + transform: { + '^.+\\.jsx?$': '/jest/jest-preprocess.js' + }, + moduleNameMapper: { + '.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy', + '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': + '/jest/__mocks__/file-mock.js' + }, + testPathIgnorePatterns: ['node_modules', '.cache', 'public', 'coverage'], + transformIgnorePatterns: ['node_modules/(?!(gatsby)/)'], + globals: { + __PATH_PREFIX__: '' + }, + testURL: 'http://localhost', + setupFiles: ['/jest/loadershim.js'], + setupFilesAfterEnv: ['/jest/setup-test-env.js'] +} diff --git a/jest/__mocks__/file-mock.js b/jest/__mocks__/file-mock.js new file mode 100644 index 0000000..0e56c5b --- /dev/null +++ b/jest/__mocks__/file-mock.js @@ -0,0 +1 @@ +module.exports = 'test-file-stub' diff --git a/jest/__mocks__/gatsby.js b/jest/__mocks__/gatsby.js new file mode 100644 index 0000000..da4cfb7 --- /dev/null +++ b/jest/__mocks__/gatsby.js @@ -0,0 +1,26 @@ +const React = require('react') +const gatsby = jest.requireActual('gatsby') + +module.exports = { + ...gatsby, + graphql: jest.fn(), + Link: jest.fn().mockImplementation( + // these props are invalid for an `a` tag + ({ + activeClassName, + activeStyle, + getProps, + innerRef, + ref, + replace, + to, + ...rest + }) => + React.createElement('a', { + ...rest, + href: to + }) + ), + StaticQuery: jest.fn(), + useStaticQuery: jest.fn() +} diff --git a/jest/jest-preprocess.js b/jest/jest-preprocess.js new file mode 100644 index 0000000..95114e5 --- /dev/null +++ b/jest/jest-preprocess.js @@ -0,0 +1,5 @@ +const babelOptions = { + presets: ['babel-preset-gatsby'] +} + +module.exports = require('babel-jest').createTransformer(babelOptions) diff --git a/jest/loadershim.js b/jest/loadershim.js new file mode 100644 index 0000000..772dcc4 --- /dev/null +++ b/jest/loadershim.js @@ -0,0 +1,3 @@ +global.___loader = { + enqueue: jest.fn() +} diff --git a/jest/setup-test-env.js b/jest/setup-test-env.js new file mode 100644 index 0000000..99c14cd --- /dev/null +++ b/jest/setup-test-env.js @@ -0,0 +1,4 @@ +import 'jest-dom/extend-expect' + +// this is basically: afterEach(cleanup) +import 'react-testing-library/cleanup-after-each' diff --git a/package.json b/package.json index 96a8883..4700725 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "dev": "./node_modules/gatsby/dist/bin/gatsby.js develop --host 0.0.0.0", "format": "prettier --write 'src/**/*.{js,jsx}'", "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'", - "test": "npm run lint", + "test": "npm run lint && jest --coverage", "deploy": "./scripts/deploy.sh", "new": "babel-node ./scripts/new.js" }, @@ -60,16 +60,22 @@ "@babel/preset-env": "^7.4.3", "@svgr/webpack": "^4.2.0", "babel-eslint": "^10.0.1", + "babel-jest": "^24.7.1", + "babel-preset-gatsby": "^0.1.11", "eslint": "^5.16.0", "eslint-config-prettier": "^4.1.0", "eslint-loader": "^2.1.2", "eslint-plugin-graphql": "^3.0.3", "eslint-plugin-prettier": "^3.0.1", "eslint-plugin-react": "^7.12.4", + "identity-obj-proxy": "^3.0.0", + "jest": "^24.7.1", + "jest-dom": "^3.1.3", "ora": "^3.4.0", "prepend": "^1.0.2", "prettier": "^1.17.0", "prettier-stylelint": "^0.4.2", + "react-testing-library": "^6.1.2", "slugify": "^1.3.4", "stylelint": "^10.0.0", "stylelint-config-css-modules": "^1.3.0", diff --git a/src/components/atoms/Button.test.jsx b/src/components/atoms/Button.test.jsx new file mode 100644 index 0000000..c9ead8e --- /dev/null +++ b/src/components/atoms/Button.test.jsx @@ -0,0 +1,19 @@ +import React from 'react' +import { render } from 'react-testing-library' + +import Button from './Button' + +describe('Button', () => { + it('renders correctly', () => { + const { getByText } = render() + + expect(getByText('Hello').nodeName).toBe('A') + }) + + it('renders children', () => { + const children = Hello World + const { getByText } = render() + + expect(getByText('Hello World')).toBeDefined() + }) +})