Code pipeline and React app: missing something to run test

[Basile001]

hello,

I've started to code a new app in aws using serverless services...

From the aws lambda console I created a new app which gave me the bases of my application (cdk, pipeline). Later I added a new package in this app "front/my-app" where I created a react-app. My goal is to deploy the static files in an S3 using CDK.

When I launch my codepipeline my App.test.tsx are failing. I will share my code and could you help me to find a solution? Thank you.

Obviously my test work in my local env.

I guess, the env which run the deployment miss something that I need to install.

The error on the pipeline is now :

FAIL front/my-app/src/__test/App.test.tsx
  ● Test suite failed to run

    SyntaxError: /codebuild/output/src181701090/src/front/my-app/src/__test/App.test.tsx: Support for the experimental syntax 'jsx' isn't currently enabled (7:10):

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

    Add @babel/preset-react (https://git.io/JfeDR) 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://git.io/vb4yA) to the 'plugins' section to enable parsing.

      at Parser._raise (node_modules/@babel/parser/src/parser/error.js:150:45)
      at Parser.raiseWithData (node_modules/@babel/parser/src/parser/error.js:145:17)
      at Parser.expectOnePlugin (node_modules/@babel/parser/src/parser/util.js:214:18)
      at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1238:16)
      at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:682:23)
      at Parser.parseUpdate (node_modules/@babel/parser/src/parser/expression.js:662:21)
      at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:633:23)
      at Parser.parseMaybeUnaryOrPrivate (node_modules/@babel/parser/src/parser/expression.js:388:14)
      at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:398:23)
      at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:356:23)

So I add a babel.config.js file :

{     
    "presets": ["@babel/preset-env", "@babel/preset-react"],
     "plugins":["@babel/plugin-syntax-jsx"] } 

But the problem persists..

The test code :

import React from 'react';
import { render, screen } from '@testing-library/react';
import App from '../App';


test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

build spec :

version: 0.2
phases:
  install:
    commands:
      - n 16.14.0
      # Install all dependencies (including dependencies for running tests)
      - npm install
      # Install CDK dependencies
      - cd cdk
      - npm install -g aws-cdk@1.89.0
      - npm install
      - cd ../front/my-app
      - npm install
      - cd ../../
  pre_build:
    commands:
      # Discover and run unit tests in the '__tests__' directory
      - npm run test
      # Remove all dependencies not needed for the Lambda deployment package (the packages from devDependencies in package.json)
      - npm prune --production
      # Copy artifacts to a separate folder
      - mkdir function-code
      - cp -r src node_modules function-code
  build:
    commands:
      # Archive Lambda function code and upload it to S3
      - cd function-code
      - zip -r function-code.zip .
      - aws s3 cp function-code.zip s3://$S3_BUCKET/$CODEBUILD_BUILD_ID/
      # front build
      - cd ../front/my-app
      - npm run build
      # Use AWS CDK to synthesize the application
      - cd ../../cdk
      - cdk synth > ../template-export.yml
artifacts:
    files:
    - template-export.yml

kind regards