├── .env ├── .github └── workflows │ ├── badges.yml │ └── test.yml ├── .gitignore ├── .npmrc ├── README.md ├── cypress.json ├── cypress ├── fixtures │ └── example.json ├── integration │ └── spec.js ├── plugins │ └── index.js └── support │ └── index.js ├── images ├── coverage-object.png ├── coverage.png ├── test.png ├── utils-coverage.png └── yarn-report.png ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── renovate.json ├── src ├── App.css ├── App.test.tsx ├── App.tsx ├── index.css ├── index.tsx ├── logo.svg ├── react-app-env.d.ts ├── serviceWorker.ts ├── setupTests.ts └── utils.tsx ├── tsconfig.json └── yarn.lock /.env: -------------------------------------------------------------------------------- 1 | BROWSER=none 2 | SKIP_PREFLIGHT_CHECK=true 3 | -------------------------------------------------------------------------------- /.github/workflows/badges.yml: -------------------------------------------------------------------------------- 1 | name: badges 2 | # update README badges only if the README file changes 3 | # or if the package.json file changes, or this file changes 4 | on: 5 | push: 6 | branches: 7 | - master 8 | paths: 9 | - README.md 10 | - package.json 11 | - .github/workflows/badges.yml 12 | 13 | jobs: 14 | build: 15 | name: Badges 16 | runs-on: ubuntu-latest 17 | steps: 18 | - name: Checkout 🛎 19 | uses: actions/checkout@v1 20 | 21 | - name: Install dependencies 📦 22 | uses: cypress-io/github-action@v1 23 | with: 24 | # just perform install 25 | runTests: false 26 | 27 | - name: Update version badges 🏷 28 | run: yarn update-badge cypress @cypress/instrument-cra @cypress/code-coverage 29 | 30 | # commit any changed files 31 | # https://github.com/mikeal/publish-to-github-action 32 | - name: Push any changes to repo 📤 33 | uses: mikeal/publish-to-github-action@master 34 | env: 35 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 36 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: test 2 | on: [push] 3 | jobs: 4 | cypress-run: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Checkout 🛎 8 | uses: actions/checkout@v1 9 | # Install NPM dependencies, cache them correctly 10 | # and run all Cypress tests 11 | - name: Cypress run 🧪 12 | uses: cypress-io/github-action@v1 13 | with: 14 | start: npm start 15 | wait-on: 'http://localhost:3000' 16 | # nyc does not do very strict code coverage 17 | # the file could be empty and the check would still pass 18 | - name: check code coverage 📈 19 | run: npx nyc report --check-coverage --lines 88 20 | - name: strict code coverage 📊 21 | run: | 22 | npx check-coverage App.tsx 23 | npx check-coverage index.tsx 24 | npx only-covered App.tsx index.tsx utils.tsx 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | .nyc_output 25 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | save-exact=true 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cra-ts-code-coverage-example [![renovate-app badge][renovate-badge]][renovate-app] [![CI stats](https://github.com/bahmutov/cra-ts-code-coverage-example/workflows/test/badge.svg?branch=master)](.github/workflows/test.yml) 2 | > React App with TypeScript and Cypress code coverage 3 | 4 | This project was created using CRA v3 5 | 6 | ```shell 7 | $ npm i -g create-react-app 8 | + create-react-app@3.3.1 9 | $ create-react-app cra-ts-code-coverage-example --template typescript 10 | ``` 11 | 12 | ## Current dependencies 13 | 14 | Name | Description 15 | --- | --- 16 | ![cypress version](https://img.shields.io/badge/cypress-4.12.1-brightgreen) | Cypress test runner [cypress-io/cypress](https://github.com/cypress-io/cypress) 17 | ![@cypress/instrument-cra version](https://img.shields.io/badge/@cypress/instrument--cra-1.4.0-brightgreen) | Instruments `react-scripts` applications on the fly 18 | ![@cypress/code-coverage version](https://img.shields.io/badge/@cypress/code--coverage-3.8.3-brightgreen) | Generates coverage reports after Cypress test runs 19 | 20 | 21 | ## Cypress tests with code coverage 22 | 23 | Add Cypress and code coverage report plugin 24 | 25 | ```shell 26 | $ yarn add -D cypress @cypress/code-coverage 27 | info Direct dependencies 28 | ├─ @cypress/code-coverage@3.7.2 29 | └─ cypress@4.5.0 30 | ``` 31 | 32 | Add library to instrument application code on the fly 33 | 34 | ```shell 35 | $ yarn add -D @cypress/instrument-cra 36 | info Direct dependencies 37 | └─ @cypress/instrument-cra@1.1.0 38 | ``` 39 | 40 | Change the `start` script in [package.json](package.json) to be `react-scripts -r @cypress/instrument-cra start`. If you start application now, there should be object `window.__coverage__` with code coverage numbers. 41 | 42 | ![code coverage object](images/coverage-object.png) 43 | 44 | Watch video [How to instrument react-scripts web application for code coverage](https://youtu.be/edgeQZ8UpD0) 45 | 46 | ### Set up coverage plugin 47 | 48 | In [cypress/support/index.js](cypress/support/index.js) add line 49 | 50 | ```js 51 | import '@cypress/code-coverage/support' 52 | ``` 53 | 54 | In [cypress/plugins/index.js](cypress/plugins/index.js) log the coverage plugin 55 | 56 | ```js 57 | module.exports = (on, config) => { 58 | require('@cypress/code-coverage/task')(on, config) 59 | // IMPORTANT to return the config object 60 | // with the any changed environment variables 61 | return config 62 | } 63 | ``` 64 | 65 | Hint: check [cypress-io/code-coverage](https://github.com/cypress-io/code-coverage) README for current installation instructions. 66 | 67 | Watch video [Get code coverage reports from Cypress tests](https://youtu.be/y8StkffYra0) 68 | 69 | ### Run tests 70 | 71 | Start app and Cypress 72 | 73 | ```shell 74 | $ yarn add -D start-server-and-test 75 | info Direct dependencies 76 | └─ start-server-and-test@1.10.8 77 | ``` 78 | 79 | In [package.json](package.json) 80 | 81 | ```json 82 | { 83 | "scripts": { 84 | "start": "react-scripts -r @cypress/instrument-cra start", 85 | "cy:open": "cypress open", 86 | "dev": "start-test 3000 cy:open" 87 | } 88 | } 89 | ``` 90 | 91 | Tip: watch video [Using start-server-and-test to start app, run tests and shut everything down](https://youtu.be/mYXXSvcmQ6Y) 92 | 93 | Start Cypress with `npm run dev` and run a single end-to-end test [cypress/integration/spec.js](cypress/integration/spec.js) 94 | 95 | ```js 96 | it('opens the app', () => { 97 | cy.visit('/') 98 | cy.get('header.App-header').should('be.visible') 99 | cy.contains('Learn tcaeR').should('be.visible') 100 | }) 101 | ``` 102 | 103 | ![test](images/test.png) 104 | 105 | The code coverage information is saved automatically in the folder `.nyc_output`. Run `nyc` tool to see summary in the terminal 106 | 107 | ```shell 108 | $ yarn nyc report 109 | ``` 110 | 111 | ![Yarn report](images/yarn-report.png) 112 | 113 | Or open generated static code coverage report with `open coverage/lcov-report/index.html` 114 | 115 | ![Coverage](images/coverage.png) 116 | 117 | You can drill into individual files 118 | 119 | ![Utils coverage](images/utils-coverage.png) 120 | 121 | You can see the app has never called `add(a, b)` function, and only has called the `reverse(s)` function once passing a string. 122 | 123 | ## See also 124 | 125 | For more examples, see [cypress-io/code-coverage](https://github.com/cypress-io/code-coverage#examples) and read the Cypress [Code Coverage Guide](http://on.cypress.io/code-coverage). You can also watch [Cypress.io - State of the Art Testing Tool](https://www.youtube.com/watch?v=JL3QKQO80fs) presentation and see its [slides](https://slides.com/bahmutov/state-of-the-art). 126 | 127 | Watch series of short videos [Cypress tips & tricks](https://www.youtube.com/playlist?list=PLP9o9QNnQuAYYRpJzDNWpeuOVTwxmIxcI) 128 | 129 | [renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg 130 | [renovate-app]: https://renovateapp.com/ 131 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "baseUrl": "http://localhost:3000" 3 | } 4 | -------------------------------------------------------------------------------- /cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } -------------------------------------------------------------------------------- /cypress/integration/spec.js: -------------------------------------------------------------------------------- 1 | /// 2 | it('opens the app', () => { 3 | cy.visit('/') 4 | cy.get('header.App-header').should('be.visible') 5 | cy.contains('Learn tcaeR').should('be.visible') 6 | }) 7 | -------------------------------------------------------------------------------- /cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | module.exports = (on, config) => { 2 | require('@cypress/code-coverage/task')(on, config) 3 | // IMPORTANT to return the config object 4 | // with the any changed environment variables 5 | return config 6 | } 7 | -------------------------------------------------------------------------------- /cypress/support/index.js: -------------------------------------------------------------------------------- 1 | import '@cypress/code-coverage/support' 2 | -------------------------------------------------------------------------------- /images/coverage-object.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bahmutov/cra-ts-code-coverage-example/f7df8a088f9f7970c8687d75c640f877d75700d2/images/coverage-object.png -------------------------------------------------------------------------------- /images/coverage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bahmutov/cra-ts-code-coverage-example/f7df8a088f9f7970c8687d75c640f877d75700d2/images/coverage.png -------------------------------------------------------------------------------- /images/test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bahmutov/cra-ts-code-coverage-example/f7df8a088f9f7970c8687d75c640f877d75700d2/images/test.png -------------------------------------------------------------------------------- /images/utils-coverage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bahmutov/cra-ts-code-coverage-example/f7df8a088f9f7970c8687d75c640f877d75700d2/images/utils-coverage.png -------------------------------------------------------------------------------- /images/yarn-report.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bahmutov/cra-ts-code-coverage-example/f7df8a088f9f7970c8687d75c640f877d75700d2/images/yarn-report.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cra-ts-code-coverage-example", 3 | "description": "React App with TypeScript and Cypress code coverage", 4 | "version": "0.1.0", 5 | "private": true, 6 | "dependencies": { 7 | "@testing-library/jest-dom": "4.2.4", 8 | "@testing-library/react": "9.5.0", 9 | "@testing-library/user-event": "7.2.1", 10 | "@types/jest": "24.9.1", 11 | "@types/node": "12.12.30", 12 | "@types/react": "16.9.25", 13 | "@types/react-dom": "16.9.5", 14 | "react": "16.13.1", 15 | "react-dom": "16.13.1", 16 | "react-scripts": "3.4.1", 17 | "typescript": "3.8.3" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts -r @cypress/instrument-cra start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "cy:open": "cypress open", 25 | "dev": "start-test 3000 cy:open" 26 | }, 27 | "eslintConfig": { 28 | "extends": "react-app" 29 | }, 30 | "nyc": { 31 | "exclude": [ 32 | "src/serviceWorker.ts" 33 | ] 34 | }, 35 | "browserslist": { 36 | "production": [ 37 | ">0.2%", 38 | "not dead", 39 | "not op_mini all" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | }, 47 | "devDependencies": { 48 | "@cypress/code-coverage": "3.8.3", 49 | "@cypress/instrument-cra": "1.4.0", 50 | "check-code-coverage": "1.0.1", 51 | "cypress": "4.12.1", 52 | "dependency-version-badge": "1.2.0", 53 | "start-server-and-test": "1.11.5" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bahmutov/cra-ts-code-coverage-example/f7df8a088f9f7970c8687d75c640f877d75700d2/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bahmutov/cra-ts-code-coverage-example/f7df8a088f9f7970c8687d75c640f877d75700d2/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bahmutov/cra-ts-code-coverage-example/f7df8a088f9f7970c8687d75c640f877d75700d2/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "config:base" 4 | ], 5 | "automerge": true, 6 | "major": { 7 | "automerge": false 8 | }, 9 | "labels": [ 10 | "type: dependencies", 11 | "renovate" 12 | ], 13 | "masterIssue": true, 14 | "timezone": "America/New_York", 15 | "schedule": [ 16 | "every weekend" 17 | ], 18 | "packageRules": [ 19 | { 20 | "packagePatterns": ["*"], 21 | "excludePackagePatterns": [ 22 | "cypress", 23 | "@cypress/code-coverage", 24 | "@cypress/instrument-cra", 25 | "start-server-and-test" 26 | ], 27 | "enabled": false 28 | } 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | import {reverse} from './utils' 5 | 6 | const App = () => { 7 | return ( 8 |
9 |
10 | logo 11 |

12 | Edit src/App.tsx and save to reload. 13 |

14 | 20 | Learn {reverse('React')} 21 | 22 |
23 |
24 | ); 25 | } 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/serviceWorker.ts: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | type Config = { 24 | onSuccess?: (registration: ServiceWorkerRegistration) => void; 25 | onUpdate?: (registration: ServiceWorkerRegistration) => void; 26 | }; 27 | 28 | export function register(config?: Config) { 29 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 30 | // The URL constructor is available in all browsers that support SW. 31 | const publicUrl = new URL( 32 | process.env.PUBLIC_URL, 33 | window.location.href 34 | ); 35 | if (publicUrl.origin !== window.location.origin) { 36 | // Our service worker won't work if PUBLIC_URL is on a different origin 37 | // from what our page is served on. This might happen if a CDN is used to 38 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 39 | return; 40 | } 41 | 42 | window.addEventListener('load', () => { 43 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 44 | 45 | if (isLocalhost) { 46 | // This is running on localhost. Let's check if a service worker still exists or not. 47 | checkValidServiceWorker(swUrl, config); 48 | 49 | // Add some additional logging to localhost, pointing developers to the 50 | // service worker/PWA documentation. 51 | navigator.serviceWorker.ready.then(() => { 52 | console.log( 53 | 'This web app is being served cache-first by a service ' + 54 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 55 | ); 56 | }); 57 | } else { 58 | // Is not localhost. Just register service worker 59 | registerValidSW(swUrl, config); 60 | } 61 | }); 62 | } 63 | } 64 | 65 | function registerValidSW(swUrl: string, config?: Config) { 66 | navigator.serviceWorker 67 | .register(swUrl) 68 | .then(registration => { 69 | registration.onupdatefound = () => { 70 | const installingWorker = registration.installing; 71 | if (installingWorker == null) { 72 | return; 73 | } 74 | installingWorker.onstatechange = () => { 75 | if (installingWorker.state === 'installed') { 76 | if (navigator.serviceWorker.controller) { 77 | // At this point, the updated precached content has been fetched, 78 | // but the previous service worker will still serve the older 79 | // content until all client tabs are closed. 80 | console.log( 81 | 'New content is available and will be used when all ' + 82 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 83 | ); 84 | 85 | // Execute callback 86 | if (config && config.onUpdate) { 87 | config.onUpdate(registration); 88 | } 89 | } else { 90 | // At this point, everything has been precached. 91 | // It's the perfect time to display a 92 | // "Content is cached for offline use." message. 93 | console.log('Content is cached for offline use.'); 94 | 95 | // Execute callback 96 | if (config && config.onSuccess) { 97 | config.onSuccess(registration); 98 | } 99 | } 100 | } 101 | }; 102 | }; 103 | }) 104 | .catch(error => { 105 | console.error('Error during service worker registration:', error); 106 | }); 107 | } 108 | 109 | function checkValidServiceWorker(swUrl: string, config?: Config) { 110 | // Check if the service worker can be found. If it can't reload the page. 111 | fetch(swUrl, { 112 | headers: { 'Service-Worker': 'script' } 113 | }) 114 | .then(response => { 115 | // Ensure service worker exists, and that we really are getting a JS file. 116 | const contentType = response.headers.get('content-type'); 117 | if ( 118 | response.status === 404 || 119 | (contentType != null && contentType.indexOf('javascript') === -1) 120 | ) { 121 | // No service worker found. Probably a different app. Reload the page. 122 | navigator.serviceWorker.ready.then(registration => { 123 | registration.unregister().then(() => { 124 | window.location.reload(); 125 | }); 126 | }); 127 | } else { 128 | // Service worker found. Proceed as normal. 129 | registerValidSW(swUrl, config); 130 | } 131 | }) 132 | .catch(() => { 133 | console.log( 134 | 'No internet connection found. App is running in offline mode.' 135 | ); 136 | }); 137 | } 138 | 139 | export function unregister() { 140 | if ('serviceWorker' in navigator) { 141 | navigator.serviceWorker.ready.then(registration => { 142 | registration.unregister(); 143 | }); 144 | } 145 | } 146 | -------------------------------------------------------------------------------- /src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /src/utils.tsx: -------------------------------------------------------------------------------- 1 | export const add = (a:number, b:number) => a + b 2 | 3 | export const reverse = (s:string|null) => { 4 | if (s === null) { 5 | return 'null' // this branch will not be called from the app 6 | } else { 7 | return s.split('').reverse().join('') 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "noEmit": true, 20 | "jsx": "react" 21 | }, 22 | "include": [ 23 | "src" 24 | ] 25 | } 26 | --------------------------------------------------------------------------------