practice React Testing Library

Practice React Testing Library | Testing Library.

environment

• create-react-app typescript
• eslint (standard version)
• prettier

script

# install package
yarn install

# start project
yarn start

# start test
yarn test

# lint+fix
yarn lint:fix

table of contents

1. Rendering test
   • component: react-testing-library/Render.tsx
   • test: react-testing-library/Render.test.tsx
2. UserEvent test (use props)
   • component: react-testing-library/RenderInput.test.tsx
   • test: react-testing-library/RenderInput.test.tsx
3. List component test (use props)
   • component: react-testing-library/FrameworkList.tsx
   • test: react-testing-library/FrameworkList.test.tsx
4. Use effect test (use axios)
   • component: react-testing-library/UseEffectRender.tsx
   • test: react-testing-library/UseEffectRender.test.tsx
5. Reducer test
   • slice: react-testing-library/customCounterSlice.ts
   • store: react-testing-library/store.ts
   • test: react-testing-library/Reducer.test.ts
6. Extra reducer test
   • slice: react-testing-library/customCounterSlice.ts
   • store: react-testing-library/store.ts
   • test: react-testing-library/ExtraReducer.test.ts
7. Integration test (not use async)
   • component: react-testing-library/Redux.tsx
   • test: react-testing-library/Redux.test.tsx
8. Integration test (use async)
   • component: react-testing-library/ReduxAsync.tsx
   • test: react-testing-library/ReduxAsync.test.tsx
9. Integration test (use async + axios)
   • component: react-testing-library/ReduxAsync.tsx
   • test: react-testing-library/ReduxAsyncAPI.test.tsx
10. Custom hook test
    • custom hook: react-testing-library/useCounter.ts
    • component: react-testing-library/CustomHooks.tsx
    • test: react-testing-library/useCounter.test.ts