uudashr / react-todo-ts

Simple React Todo App (TypeScript version)

React Todo App (TypeScript Version)

Simple React Todo Application

Reference Documentation

1. Jest Documentation
2. Testing Library Documentation
3. How to fetch data with React Hooks
4. Typesafe JSON parsing

Testing

jsdom

In order to jsdom to works, se need to mock the matchMedia. Need to add script on setupTests.js

Object.defineProperty(window, 'matchMedia', {
  value: () => {
    return {
      matches: false,
      addListener: () => { },
      removeListener: () => { }
    };
  }
});

Ant Design

Add below to package.json tp ensure the antd can works with testing.

{
  "jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!antd|@ant-design|rc-.+?|@babel/runtime).+(js|jsx)$"
    ],
  }
}

Mock

Add below to package.json to ensure the test Jest mock / jest.fn() can works

{
  "jest": {
    "resetMocks": false
  }
}

Ref: jestjs/jest#9131

TypeScript Conversion

Install dependencies

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Add tsconfig.json on the project root directory

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

References:

• https://create-react-app.dev/docs/adding-typescript/
• https://react-typescript-cheatsheet.netlify.app/docs/basic/setup