hippocampus-experiment v0.1.1
Hippocampus
A Time Capsule for Your Loved Ones
Run Scripts
Inside the project directory run:
yarn start
- runs the app in the development mode. Open http://localhost:3000 to view it in the browser.yarn test
- launches the test runner in the interactive watch mode.yarn build
- builds the app for production to thebuild
folder.yarn build:serve
- run a local static build using the production build using serve library. Installyarn install -g serve
.yarn build:profile
- profiling production build.yarn eject
- exposes content ofreact-script
packageyarn lint
- lints project files according to Airbnb — as part of their style guide 👍 — it provides an ESLint configuration that anyone can use and it is the standard.yarn fix
- fix lints issues according to style guide set.yarn format
- will format your code prettier using opinionated settings inside.prettierrc
file.yarn isready
- will check if the code is ready for showtime (production), run lint, format and build.yarn test:e2e
- run e2e integration testing with the help of Jest & Puppeteer.yarn test:e2e-watch
- same as test:e2e just with a watcher.yarn test:e2e-alone
- stand-alone e2e integration testing NodeJS script for testing using Puppeteer.yarn test:debug
- debug your jest tests using the debugger statement, more info here.yarn coverage
- this test is to create a coverage report at needs extra setting in order to work as expected.
CRA template only support scripts
and dependencies
inside generated package.json
. No devDependencies
is possible on CRA template for now.
Need bootstrap?
If you need bootstrap. Just add;
$ yarn add bootstrap
Uncomment import in index.tsx;
import 'bootstrap/dist/css/bootstrap.css';
More here: https://create-react-app.dev/docs/adding-bootstrap
Router + State Management
Router via React Router v5.2.0 and is set on 'AppRouter.tsx' and included in 'index.tsx', read here.
The code is set for Recoil
Unit Testing
Unit Testing is supported with Enzyme that works with Jest. Additionally, Sinon - a standalone test spies, stubs and mocks that works with Enzyme & Jest.
You can compare the list of APIs on Jest (https://jestjs.io/docs/en/api) and Sinon (https://sinonjs.org/releases/v9.2.0/)
The 'src/setupTests.ts' file is already configured to work with enzyme using the enzyme react adapter.
For snapshot -- update 'package.json';
// package.json
"jest": {
"snapshotSerializers": ["enzyme-to-json/serializer"]
}
Note: remember to update / delete 'src/App.test.tsx' in case you update 'App.tsx'
For instance to check if a component you added include in App.tsx;
import { shallow } from "enzyme";
import Calculator from "./components/SomeComponent/SomeComponent";
test('should render SomeComponent', () => {
const wrapper = shallow(<App />);
const calculator = wrapper.find(SomeComponent);
expect(calculator.exists()).toBe(true);
})
You can read more about unit testing: hello-jest-enzyme-ts
To run the tests:
$ yarn test
Coverage
To set coverage we can use Jest. Jest allow us to create reports in different format and set where we want to collect these reports from (or not collect them from), as well as ensure the coverageThreshold. Take a look at my 'package.json' settings;
To get testing coverage report, you need to include the following settings in your 'package.json' file;
// package.json
"jest": {
"coverageReporters": [
"json",
"text",
"html",
"lcov"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*/*.d.ts",
"!src/**/*/Loadable.{js,jsx,ts,tsx}",
"!src/**/*/types.ts",
"!src/**/store.ts",
"!src/index.tsx",
"!src/serviceWorker.ts",
"!<rootDir>/node_modules/",
"!**/templates/**",
"!**/template/**"
],
"coverageThreshold": {
"global": {
"branches": 50,
"functions": 50,
"lines": 50,
"statements": 50
}
}
E2E Testing
E2E testing provided by Jest & Puppeteer. Check the E2E folder for stand-alone and testing app.test.tsx component. You can read more about it here.
To run the E2E stand-alone and Jest & Puppeteer tests run;
$ yarn test:e2e
And;
$ yarn test:e2e-alone
Format configurations
Prettier is set using my opinionated settings, feel free to tweak prettier rules inside config file .prettierrc
to match your code style.
Configure Components Templates
generate-react-cli help speed up productivity in React projects, feel free to tweak rules inside the config file generate-react-cli.json
to match your needs.
Debugging and Profiling
There are many options to debug such as using this run script and placing debugger
statements
$ yarn test:debug
. Read how on how to debug the App in this article.
For Profiling you can use methods such as Chrome DevTools or the <Profile>
Component. Here is an example;
// src/AppRouter.tsx
import { Profiler } from 'react'
const AppRouter: FunctionComponent = () => {
return (
<Profiler onRender={(id, phase, actualTime, baseTime, startTime, commitTime) => {
console.log(`${id}'s ${phase} phase:`);
console.log(`Actual time: ${actualTime}`);
console.log(`Base time: ${baseTime}`);
console.log(`Start time: ${startTime}`);
console.log(`Commit time: ${commitTime}`);
}}>
<Router>
<RecoilRoot>
<Suspense fallback={<span>Loading...</span>}>
<Switch>
<Route exact path="/" component={App} />
</Switch>
</Suspense>
</RecoilRoot>
</Router>
</Profiler>
)
}
Read more about profiling options here.
Optimizing
- Prerender - almost static pages using
react-snap
. See comments in:src/index.tsx
; - Precache - src/index.tsx >
serviceWorker.register()
- Analyzer Bundle -
yarn add -D cra-bundle-analyzer
-> Create the report:npx cra-bundle-analyzer
Read more about optimizing in this article.
3 years ago