yarn test(jest) finds no tests with create-react-app

Question

I am fairly new to automated testing in JavaScript and wanted to include Jest in my work.

I followed a simple guide for Jest-Testing in create-react-app.

When I try to run my test with yarn test , it starts in watch mode without any errors and then gives me:

No tests found, exiting with code 0

My testfile is in src/*.spec.ts. I tried *.test.js, put it in src/__test__/(*.js | *.ts).

I could not figure out, why it does not find any test.

So I created a completely new react app:

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

And it gave me the exact same error (no tests found) with a plain new create-react-app. Tried it with and without typescript.

I installed jest globally and tried to test with just jest as command in my project folder. It finds the tests like it should, but it has syntax errors with the first JSX statement:

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

The package.json from the fresh create-react-app looks like this for me:

{
  "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"
    ]
  }
}

I am on Windows10 right now. I found many errors describing my problem but it seems there was such a thing with Jest 22/23 because of micropatterns, while I am on Jest 25.2.1 and a fresh install. None of the provided solutions worked for me.
Since I am completely new to jest I would appreciate some help.

Answer 1

It shows that you have syntax errors in your test, because your test file has jsx inside of it and is named .ts , but it should be .tsx

Answer 2

@Cookie I don't remember exactly what the problem itself was in the end, but maybe my current setupTests.ts can help out here:

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'],
};

All my tests are in src/__tests__ .

Answer 3

Adding arguments to test script in package.json helped for me:

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