ts react jest單元測試問題

Jest同時支持ts和react jsx

• TypeScript + Jest + React-Testing-Library：https://www.jianshu.com/p/1bef70cfe712

jest配置文件

// jest.config.js

module.exports = {
  // preset: 'ts-jest',
  // testEnvironment: 'node',
  // roots: ['<rootDir>/src'],
  transform: {
      '^.+\\.tsx?$': 'ts-jest',
  },
  testRegex: '^.+\\.test\\.(ts|tsx)$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  moduleNameMapper: {
    "\\.(css|less)$": "identity-obj-proxy",
  },
};

• @testing-library/react的query api：https://testing-library.com/docs/dom-testing-library/api-queries

  • ByLabelText
  • ByPlaceholderText
  • ByText
  • 。。。

• @testing-library/react在jest中的斷言庫：https://github.com/testing-library/jest-dom

  • 斷言：
    • toBeDisabled
    • toBeEnabled
    • toBeEmpty
    • toBeEmptyDOMElement
    • 。。。

Jest 解析css文件異常

• Jest 解析css文件異常：https://www.jianshu.com/p/34d88e920367
• jest-unexpected-token-when-importing-css -- https://stackoverflow.com/questions/54627028/jest-unexpected-token-when-importing-css

react hooks 的單元測試

• 如何對 react hooks 進行單元測試：https://segmentfault.com/a/1190000020058166
• React Hooks測試徹底指南：https://zhuanlan.zhihu.com/p/220278150
• 使用@testing-library/react-hooks：https://github.com/testing-library/react-hooks-testing-library