title: My tests isn't working with react-testing-library with typescript
body: <p>I've got an issue with react-testing-library with my React project on TypeScript.</p>
  <p>I've been searching on many websites an answer, checking tutorials but I'm really stuck and can't find the answer, changing some configurations on babel.config.js, tsconfig.json and jest.config.js, installing new packages (not sure if I had to install @types for testing-library for example) but I'm not expert with all of this and I'm lost.</p>
  <p>I've tried an easy test and it says :</p>
  <pre><code>Unexpected token, expected &quot;,&quot; (11:47)
  
         9 | describe('Test SectionTitle', () =&gt; {
        10 |   test('renders message', () =&gt; {
      &gt; 11 |     const { getByText } = render(&lt;SectionTitle tag=&quot;h1&quot;&gt;Mon titre&lt;/SectionTitle&gt;)
           |                                                ^
        12 | 
        13 |     expect(getByText('Mon titre')).toBeInTheDocument()
        14 |   })
  </code></pre>
  <p>The structure of my project is as belows :</p>
  <pre><code>    .
      ├── public                      # Where build files are (shoudn't be this way)
      ├── src                         # Source files (alternatively `lib` or `app`)
      │   ├── assets                  # All images
      │   ├── components              # All the components
      │   │   ├── component.spec.ts   # Test files 
      │   │   ├── component.styled.ts # Style of the component with styled-components 
      │   │   ├── component.tsx       # Component file
      │   │   └── index.ts            # Choose what to export
      │   ├── routes                  # All routes with react-router-dom
      │   ├── screens                 # All screens
      │   │   ├── screen.spec.ts      # Test files 
      │   │   ├── screen.styled.ts    # Style of the screen with styled-components 
      │   │   ├── screen.meta.tsx     # Meta tag of the screen with react-helmet 
      │   │   ├── screen.tsx          # Screen file
      │   │   └── index.ts            # Choose what to export
      │   ├── sitemap                 # Sitemap generator (issue about missing some parameters, changefreq, priority, lastmod etc.)[https://github.com/kuflash/react-router-sitemap/issues/39]
      │   ├── style                   # Helpers, utils, variables CSS, global style etc
      │   ├── index.tsx               # Index file
      │   ├── setupTests.ts           # Packages to be imported for tests
      └── README.md
      └── webpack.config.js           # Config of webpack
      └── babel.config.js             # Config of babel
      └── jest.config.js              # Config of jest
      └── tsconfig.json               # Config for TypeScript like imported paths with '@'
      └── custom.d.ts                 # Adding Custom Type Definitions
      └── .prettierrc                 # Rules for prettier
      └── .prettierignore             # Files to be ignored for prettier
      └── .gitignore                  # Files to be ignored for git
      └── package.json                # List of packages and commands to run with yarn
      └── yarn.lock                   # Packages in the node_modules folder
  
  </code></pre>
  <p>Here's my package.json dependencies and scripts :</p>
  <pre><code>{
    &quot;dependencies&quot;: {
      &quot;framer-motion&quot;: &quot;^1.11.0&quot;,
      &quot;react&quot;: &quot;^16.13.1&quot;,
      &quot;react-cookie-consent&quot;: &quot;^5.0.1&quot;,
      &quot;react-dom&quot;: &quot;^16.13.1&quot;,
      &quot;react-ga&quot;: &quot;^3.0.0&quot;,
      &quot;react-helmet&quot;: &quot;^6.0.0&quot;,
      &quot;react-router-dom&quot;: &quot;^5.1.2&quot;,
      &quot;styled-components&quot;: &quot;^5.1.0&quot;
    },
    &quot;scripts&quot;: {
      &quot;prebuild&quot;: &quot;yarn run sitemap&quot;,
      &quot;build&quot;: &quot;webpack --mode production&quot;,
      &quot;start&quot;: &quot;webpack-dev-server --mode development&quot;,
      &quot;sitemap&quot;: &quot;babel-node src/sitemap/sitemap-builder.js&quot;,
      &quot;test&quot;: &quot;jest -c jest.config.js --watch&quot;
    },
    &quot;husky&quot;: {
      &quot;hooks&quot;: {
        &quot;pre-commit&quot;: &quot;lint-staged&quot;
      }
    },
    &quot;lint-staged&quot;: {
      &quot;./src/**/*.{ts,tsx}&quot;: [
        &quot;prettier --write .&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/cli&quot;: &quot;^7.8.4&quot;,
      &quot;@babel/core&quot;: &quot;^7.9.6&quot;,
      &quot;@babel/node&quot;: &quot;^7.10.1&quot;,
      &quot;@babel/plugin-transform-typescript&quot;: &quot;^7.10.1&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.9.6&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.10.1&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^5.11.0&quot;,
      &quot;@testing-library/react&quot;: &quot;^10.4.3&quot;,
      &quot;@types/jest&quot;: &quot;^26.0.3&quot;,
      &quot;@types/node&quot;: &quot;^14.0.14&quot;,
      &quot;@types/react&quot;: &quot;^16.9.0&quot;,
      &quot;@types/react-dom&quot;: &quot;^16.9.0&quot;,
      &quot;@types/react-helmet&quot;: &quot;^6.0.0&quot;,
      &quot;@types/react-router-dom&quot;: &quot;^5.1.5&quot;,
      &quot;@types/styled-components&quot;: &quot;^5.1.0&quot;,
      &quot;@types/testing-library__jest-dom&quot;: &quot;^5.9.1&quot;,
      &quot;@types/testing-library__react&quot;: &quot;^10.2.0&quot;,
      &quot;babel-loader&quot;: &quot;^8.1.0&quot;,
      &quot;css-loader&quot;: &quot;^3.5.3&quot;,
      &quot;file-loader&quot;: &quot;^6.0.0&quot;,
      &quot;husky&quot;: &quot;^4.2.5&quot;,
      &quot;jest&quot;: &quot;^26.1.0&quot;,
      &quot;lint-staged&quot;: &quot;^10.2.2&quot;,
      &quot;prettier&quot;: &quot;^2.0.5&quot;,
      &quot;react-router-sitemap&quot;: &quot;^1.2.0&quot;,
      &quot;source-map-loader&quot;: &quot;^0.2.4&quot;,
      &quot;style-loader&quot;: &quot;^1.2.1&quot;,
      &quot;ts-jest&quot;: &quot;^26.1.1&quot;,
      &quot;ts-loader&quot;: &quot;^7.0.3&quot;,
      &quot;tsconfig-paths-webpack-plugin&quot;: &quot;^3.2.0&quot;,
      &quot;typescript&quot;: &quot;~3.7.2&quot;,
      &quot;webpack&quot;: &quot;^4.43.0&quot;,
      &quot;webpack-cli&quot;: &quot;^3.3.11&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.11.0&quot;
    }
  }
  
  </code></pre>
  <p>Here's my jest.config.js :</p>
  <pre><code>module.export = {
    preset: 'ts-jest',
    testEnvironment: 'jsdom',
    transform: {
      &quot;^.+\\.tsx?$&quot;: &quot;ts-jest&quot;
    },
    roots: ['&lt;rootDir&gt;/src'],
    testMatch: ['&lt;rootDir&gt;/src/**/&gt;(*.)spec.{ts, tsx}'], // finds test
    moduleFileExtensions: ['ts', 'tsx', 'json', 'node'],
    testPathIgnorePatterns: ['/node_modules/', '/public/'],
    setupFilesAfterEnv: '&lt;rootDir&gt;/src/setupTests.ts'
  };
  </code></pre>
  <p>Here is my setupTests.ts :</p>
  <pre><code>import '@testing-library/jest-dom/extend-expect'
  import '@testing-library/react/cleanup-after-each'
  </code></pre>
  <p>This is my tsconfig.json :</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;lib&quot;: [
        &quot;dom&quot;,
        &quot;dom.iterable&quot;,
        &quot;esnext&quot;
      ],
      &quot;allowJs&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;resolveJsonModule&quot;: true,
      &quot;isolatedModules&quot;: true,
      &quot;noEmit&quot;: true,
      &quot;target&quot;: &quot;es5&quot;,
      &quot;module&quot;: &quot;commonjs&quot;,
      &quot;rootDir&quot;: &quot;src&quot;,
      &quot;outDir&quot;: &quot;public&quot;,
      &quot;jsx&quot;: &quot;react&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;strict&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;baseUrl&quot;: &quot;src&quot;,
      &quot;paths&quot;: {
        &quot;@assets/*&quot;: [
          &quot;assets/*&quot;
        ],
        &quot;@components/*&quot;: [
          &quot;components/*&quot;
        ],
        &quot;@routes/*&quot;: [
          &quot;routes/*&quot;
        ],
        &quot;@screens/*&quot;: [
          &quot;screens/*&quot;
        ],
        &quot;@style/*&quot;: [
          &quot;style/*&quot;
        ]
      }
    },
    &quot;include&quot;: [
      &quot;src&quot;,
      &quot;custom.d.ts&quot;
    ]
  }
  </code></pre>
  <p>This is my babel.config.js :</p>
  <pre><code>module.exports = {
    presets: [&quot;@babel/preset-env&quot;, &quot;@babel/preset-react&quot;],
    plugins: [&quot;@babel/plugin-transform-typescript&quot;]
  };
  </code></pre>
  <p>This is my webpack.config.js :</p>
  <pre><code>const path = require(&quot;path&quot;);
  const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
  
  module.exports = {
    resolve: {
      extensions: [&quot;.tsx&quot;, &quot;.ts&quot;, &quot;.js&quot;],
      plugins: [new TsconfigPathsPlugin({ configFile: &quot;./tsconfig.json&quot; })]
    },
    devServer: {
      contentBase: path.join(__dirname, &quot;public&quot;),
      compress: true,
      port: 3000,
      historyApiFallback: true,
      publicPath: '/'
    },
    entry: path.resolve(__dirname, &quot;src&quot;, &quot;index.tsx&quot;),
    output: {
      path: path.resolve(__dirname, &quot;public&quot;),
      filename: &quot;bundle.js&quot;,
      publicPath: '/'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: [&quot;babel-loader&quot;]
        },
        {
          test: /\.ts(x?)$/,
          exclude: /node_modules/,
          use: [{ loader: &quot;ts-loader&quot; }]
        },
        {
          test: /\.css$/,
          use: [{ loader: &quot;style-loader&quot; }, { loader: &quot;css-loader&quot; }]
        },
        {
          test: /\.(png|svg|jpg|gif)$/i,
          use: [&quot;file-loader&quot;]
        },
        {
          enforce: &quot;pre&quot;,
          test: /\.js$/,
          loader: &quot;source-map-loader&quot;
        }
      ]
    }
  };
  </code></pre>
  <p>The component SectionTitle.tsx :</p>
  <pre><code>import React from 'react'
  import SectionTitleWrapper from './SectionTitle.styled'
  
  interface IProps {
    children: JSX.Element[] | JSX.Element | string
    tag: 'h1' | 'h2'
  }
  
  const SectionTitle = (props: IProps) =&gt; &lt;SectionTitleWrapper as={props.tag}&gt;{props.children}&lt;/SectionTitleWrapper&gt;
  
  export default SectionTitle
  </code></pre>
  <p>And the test SectionTitle.spec.tsx :</p>
  <pre><code>import React from 'react'
  import { render, cleanup } from '@testing-library/react'
  import SectionTitle from './SectionTitle'
  
  afterEach(cleanup)
  
  describe('Test SectionTitle', () =&gt; {
    test('renders message', () =&gt; {
      const { getByText } = render(&lt;SectionTitle tag=&quot;h1&quot;&gt;Mon titre&lt;/SectionTitle&gt;)
  
      expect(getByText('Mon titre')).toBeInTheDocument()
    })
  })
  
  </code></pre>
  <p>To summarize, the website is working, the build is working too but not the tests :/
  Thanks in advance for helping me !</p>