yarn test(jest) 發現沒有使用 create-react-app 的測試

Question

我對 JavaScript 中的自動化測試還很陌生，想在我的工作中加入 Jest。

我遵循了 create-react-app 中 Jest-Testing 的簡單指南。

當我嘗試使用yarn test運行我的測試時，它以監視模式啟動，沒有任何錯誤，然后給我：

No tests found, exiting with code 0

我的測試文件在 src/*.spec.ts 中。 我試過 *.test.js，把它放在 src/__test__/(*.js | *.ts) 中。

我想不通，為什么它沒有找到任何測試。

所以我創建了一個全新的 React 應用程序：

yarn create react-app test --typescript
cd .\test
yarn test

它給了我完全相同的錯誤（沒有找到測試），一個普通的新 create-react-app。 嘗試使用和不使用 typescript。

我在全球范圍內安裝了 jest，並嘗試在我的項目文件夾中僅使用jest作為命令進行測試。 它像它應該的那樣找到測試，但是它的第一個 JSX 語句有語法錯誤：

      4 |
      5 | test('renders learn react link', () => {
    > 6 |   const { getByText } = render(<App />);
        |                                ^
      7 |   const linkElement = getByText(/learn react/i);
      8 |   expect(linkElement).toBeInTheDocument();
      9 | });

新鮮的 create-react-app 中的package.json對我來說是這樣的：

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我現在在 Windows10 上。 我發現了很多描述我的問題的錯誤，但由於微模式，Jest 22/23 似乎有這樣的事情，而我正在使用 Jest 25.2.1 和全新安裝。 所提供的解決方案都不適合我。
由於我是開玩笑的新手，因此我將不勝感激。

Answer 1

它表明你的測試中有語法錯誤，因為你的測試文件里面有 jsx 並且被命名為.ts ，但它應該是.tsx

Answer 2

@Cookie我不記得到底是什么問題本身，但也許我當前的setupTests.ts可以在這里提供幫助：

import '@testing-library/jest-dom/extend-expect';

module.exports = {
  // The root of your source code, typically /src
  // `<rootDir>` is a token Jest substitutes
  roots: ['<rootDir>/src'],

  // Jest transformations -- this adds support for TypeScript
  // using ts-jest
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },

  // Runs special logic, such as cleaning up components
  // when using React Testing Library and adds special
  // extended assertions to Jest
  setupFilesAfterEnv: [
    '@testing-library/react/cleanup-after-each',
    '@testing-library/jest-dom/extend-expect',
  ],

  // Test spec file resolution pattern
  // Matches parent folder `__tests__` and filename
  // should contain `test` or `spec`.
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',

  // Module file extensions for importing
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
};

我所有的測試都在src/__tests__中。

Answer 3

將 arguments 添加到package.json中的測試腳本對我有幫助：

"test": "react-scripts test --testMatch '**/*.test.js' '**/*.test.ts' '**/*.test.jsx' '**/*.test.tsx'"