diff --git a/.env.development b/.env.development index dc442c6..36eb9d6 100644 --- a/.env.development +++ b/.env.development @@ -1 +1 @@ -REACT_APP_I18N_DEBUG=1 \ No newline at end of file +REACT_APP_I18N_DEBUG=true \ No newline at end of file diff --git a/.eslintignore b/.eslintignore index 8cdeee9..5df3ef2 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,4 @@ src/config.ts src/serviceWorker.js +jest.config.js +.eslintrc.js \ No newline at end of file diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 0000000..9750d7f --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,36 @@ +name: Lint and JS Test +on: + push: + branches: [master] + pull_request: + branches: [master] + +jobs: + build-and-deploy: + runs-on: ubuntu-latest + steps: + - name: Checkout 🛎️ + uses: actions/checkout@v2.3.1 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly. + with: + persist-credentials: false + + - name: Get yarn cache directory path + id: yarn-cache-dir-path + run: echo "::set-output name=dir::$(yarn cache dir)" + + - uses: actions/cache@v2 + id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) + with: + path: ${{ steps.yarn-cache-dir-path.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn- + + - name: Install dependencies + run: yarn + + - name: Lint 🤖 + run: yarn lint + + - name: Test 🔧 + run: yarn test diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 0000000..2bb9891 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,30 @@ +module.exports = { + // The root of your source code, typically /src + // `` is a token Jest substitutes + roots: ['/src'], + + // Jest transformations -- this adds support for TypeScript + // using ts-jest + transform: { + '^.+\\.tsx?$': 'ts-jest', + }, + + // Runs special logic, such as cleaning up components + // when using React Testing Library and adds special + // extended assertions to Jest + setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'], + + // Test spec file resolution pattern + // Matches parent folder `__tests__` and filename + // should contain `test` or `spec`. + testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$', + + // Module file extensions for importing + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], + + moduleNameMapper: { + '^.+\\.(css|scss)$': 'identity-obj-proxy', + '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': + '/fileMocks.js', + }, +}; diff --git a/package.json b/package.json index 556ffcb..8582df8 100644 --- a/package.json +++ b/package.json @@ -25,12 +25,13 @@ "scripts": { "start": "react-scripts start", "build": "react-scripts build", - "test": "react-scripts test", "eject": "react-scripts eject", "predeploy": "yarn run build", "deploy": "gh-pages -d build", "format": "prettier --write src/**/*.ts{,x}", - "lint": "tsc --noEmit && eslint src/**/*.ts{,x}" + "lint": "tsc --noEmit && eslint src/**/*.ts{,x}", + "test": "jest", + "test:watch": "jest --watch" }, "browserslist": { "production": [ @@ -45,12 +46,16 @@ ] }, "devDependencies": { + "@testing-library/jest-dom": "^5.11.8", + "@testing-library/react": "^11.2.3", + "@types/jest": "^26.0.20", "@types/lodash": "^4.14.167", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "@types/react-router-dom": "^5.1.7", "@typescript-eslint/eslint-plugin": "^4.12.0", "@typescript-eslint/parser": "^4.12.0", + "axios-mock-adapter": "^1.19.0", "eslint": "7.2.0", "eslint-config-airbnb": "18.2.1", "eslint-config-airbnb-typescript": "^12.0.0", @@ -62,9 +67,11 @@ "eslint-plugin-react": "^7.21.5", "eslint-plugin-react-hooks": "4.0.0", "husky": "^3.0.5", + "jest": "^26.6.3", "prettier": "^2.2.1", "pretty-quick": "^1.11.1", "sass": "^1.32.2", + "ts-jest": "^26.4.4", "typescript": "^4.1.3" }, "husky": { diff --git a/src/App.test.tsx b/src/App.test.tsx index 2a68616..80b6467 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,9 +1,18 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render } from '@testing-library/react'; import App from './App'; -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); +jest.mock('react-i18next', () => ({ + useTranslation: () => ({ + t: (k: string) => k, + i18n: { + changeLanguage: (l: string) => {}, + language: 'en', + }, + }), +})); + +test('renders the app container', () => { + const { container } = render(); + expect(container.querySelector('div.App')).toBeTruthy(); }); diff --git a/src/App.tsx b/src/App.tsx index 0d96097..0d9084e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,10 +5,10 @@ import './App.scss'; import { createMuiTheme } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; import LinearProgress from '@material-ui/core/LinearProgress'; -import { Paper, Toolbar } from '@material-ui/core'; import Header from './components/Header'; import Home from './containers/home/home'; import NotFound from './containers/not-found/not-found'; +import Footer from './components/Footer'; const theme = createMuiTheme({ palette: { @@ -33,17 +33,7 @@ const App: FunctionComponent = () => { -