Exclude test files from typescript type checking when building for production, you don’t want a typescript error in your test file breaks your build in production. —Nguyen Viet Hung, hung.dev describe ( ' App ' , () => { it ( ' should work as expected ' , () => { expect ( 1 + 1 ). toBe ( 2 );

node 'node_modules/.bin/jest' '/.../code/my-doc-test-app/src/App.test.tsx' -t 'App'
 PASS  src/App.test.tsx
    ✓ should work as expected (1 ms)
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.209 s
Ran all test suites matching /...\/code\/my-doc-test-app\/src\/App.test.tsx/i with tests matching "App".
// src/App.test.tsx
import { render } from '@testing-library/react';
import App from './App';
describe('App', () => {
  it('should work as expected', () => {
    render(<App />);
    
node 'node_modules/.bin/jest' '/Users/satparkash/code/test-app/src/A
pp.test.tsx' -t 'App'
 FAIL  src/App.test.tsx
  ● Test suite failed to run
    SyntaxError: /Users/satparkash/code/test-app/src/App.test.tsx: Support for the experimental syntax 'jsx' isn't currently enabled (6:12):
      4 | describe('App', () => {
      5 |   it('should work as expected', () => {
    > 6 |     render(<App />);
        |            ^
      7 |   });
      8 | });
    Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
    If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.
    Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.278 s
Ran all test suites matching /\/Users\/satparkash\/code\/test-app\/src\/App.test.tsx/i with tests matching "App".
The above ☝️ error message is indicating a syntax related to JSX in test file.

The error is saying that support for the syntax 'JSX' isn't currently enabled.
To resolve the issue we need to make sure that the JSX syntax is properly

configured for project, and also the jest. (Hint: Babel)
  7. For JSX support, add babel presets and add .babelrc
Firstly Install dependancies
npm i @babel/preset-env @babel/preset-react @babel/preset-typescript --save-dev
    "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", { "runtime": "automatic" }],
    "@babel/preset-typescript"
    
node 'node_modules/.bin/jest' '/Users/satparkash/code/test-app/src
/App.test.tsx' -t 'App'
 FAIL  src/App.test.tsx
  ● Test suite failed to run
    Cannot find module '@testing-library/react' from 'src/App.test.tsx'
    > 1 | import { render } from '@testing-library/react';
      2 | import App from './App';
      4 | describe('App', () => {
      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:427:11)
      at Object.require (src/App.test.tsx:1:1)
Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.231 s
Ran all test suites matching /\/Users\/satparkash\/code\/test-app\/src\/App.test.tsx/i with tests matching "App"
Now, you have to add libraries which will allow you to make things happen (access VDOM, interacting …. etc), And those libraries are “@testing-library/dom”, “@testing-library/jest-dom”, “@testing-library/react” and “@testing-library/user-event”
  —Mhand
Now it's time to configure jest-environment. You will see another error message

saying Jest encountered an unexpected token, don't worry we are about to fix

  9. Let's Configure Jest
Firstly install following dependancies
npm i ts-node jest-environment-jsdom --save-dev
    moduleNameMapper: {
    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/config/jest/fileMock.ts',
    '^.+\\.(css|less|scss|sass)$': '<rootDir>/config/jest/styleMock.ts',
  setupFilesAfterEnv: ['./config/jest/setupTests.ts'],
  moduleFileExtensions: [
    // Place tsx and ts to beginning as suggestion from Jest team
    // https://jestjs.io/docs/configuration#modulefileextensions-arraystring
    'tsx',
    'ts',
    'web.js',
    'js',
    'web.ts',
    'web.tsx',
    'json',
    'web.jsx',
    'jsx',
    'node',
  modulePaths: ['<rootDir>/src'],
    
// config/jest/fileMock.ts
export {}; //coment this if you ts-node to start complaining again
module.exports = 'test-file-stub';
    
//config/jest/setupTests.ts
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
    
node 'node_modules/.bin/jest' '/Users/satparkash/code/test-app/src/App.test.tsx' -t 'App'
 PASS  src/App.test.tsx
    ✓ should work as expected (12 ms)
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.19 s
Ran all test suites matching /\/Users\/satparkash\/code\/test-app\/src\/App.test.tsx/i with tests matching "App".
    
error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.
          .get(import.meta.env.VITE_API_PATH + '/api/posts')
              path: 'node_modules/ts-jest-mock-import-meta',
              options: {
                metaObjectReplacement: {
                  env: {
                    // Replicate as .env.local
                    VITE_API_PATH: 'http://localhost:3001',
Setup Jest with Vite (featuring SWC)
Setup Testing Environment for React/TypeScript with Jest ! 
Installing Jest for Testing in Your Vite-React TypeScript Project. A Step-by-Step Guide.
How to setup Jest and React Testing Library in Vite project 
ChatGPT
The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.
      
Built on Forem — the open source software that powers DEV and other inclusive communities.
      
Made with love and Ruby on Rails. DEV Community © 2016 - 2024.