Repository that helps me in presenting: good practices, risks, popular mistakes and proper configuration.
pnpm start
-> go to http://localhost:8080/
pnpm test
- GOOD:
Jest Runner
,Jest Snippets
- AVOID:
Jest
(makes VSC very slow)
- src
- components
- componentFolder
- componentFile.tsx
- componentFile.test.tsx
- componentFolder
- utils
- featureFolder
- featureFile.ts
- featureFile.test.ts
- featureFolder
- components
jest.config.ts
- initialized withnpx ts-jest config:init
, changed to.ts
as shown here (https://jestjs.io/docs/configuration) and changedtestEnvironment
tojsdom
(it was default back then, now it's not default but should be used when testing browser environment) (see possibilities: https://jestjs.io/docs/configuration#testenvironment-string)jest.setup.js
NOTE: you can define jest.config
within package.json
by putting it inside jest
key, see:
https://jestjs.io/docs/configuration
Config file as .js
to make adding comments possible.
Regular json files (e.g. package.json
) don't allow comments.
Some json (jsonc) files (e.g. tsconfig.json
) allow comments but you can't easily recognize them thus using just .js
is better.
Initial config && dependencies added automatically via npx eslint --init
.
Config file as .js
to make adding comments possible.
There are two eslint plugins just for testing purposes:
eslint-plugin-jest
- e.g. to avoid duplicating test case description, to enforce using one syntax for test cases (it vs test). See rules: https://github.com/jest-community/eslint-plugin-jest#ruleseslint-plugin-testing-library
- e.g. to enforce best practices according to library authors. See rules: https://github.com/testing-library/eslint-plugin-testing-library#supported-rules
If you wondering what's reset.d.ts
then see: https://github.com/total-typescript/ts-reset
Based on @tsconfig/strictest
- https://github.com/tsconfig/bases
https://medium.com/plain-and-simple/arrange-act-assert-vs-given-when-then-c22da421bf75 https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#using-waitfor-to-wait-for-elements-that-can-be-queried-with-find https://kentcdodds.com/blog/avoid-nesting-when-youre-testing
Because it's significantly faster than npm or yarn: https://pnpm.io/
Because it's a part of most popular testing setup when Jest is also used.
To be able to use TypeScript in tests.
To be able to write (and thus validate) webpack config in TypeScript: https://webpack.js.org/configuration/configuration-languages/
I don't need to support https://github.com/browserslist/browserslist in this project, so I can use TypeScript directly as shown in webpack docs: https://webpack.js.org/guides/typescript/