I cant test my Counter component a snapshot test

Question

I used create-react-app to setup my react app. I was trying to test the Counter component but this error keeps happening I don't really understand what the error is can you please help me.

import React from 'react';
import renderer from 'react-test-renderer';

import { Counter} from './App';

describe('Snapshot baby',() => {

    test(() => {
        const component = renderer.create(<Counter counter={1}/>).toJSON();
        expect(component).toMatchSnapshot();
    })
})

export const Counter = ({ counter }) => (
  <div>
    <p>{counter}</p>
  </div>
);

src/App.spec.js
  ● Test suite failed to run

    SyntaxError: /home/mike/Documents/All about React/Practice React/react_testing/src/App.spec.js: Support for the experimental syntax 'jsx' isn't currently enabled (9:43):

       7 | 
       8 |     test(() => {
    >  9 |         const component = renderer.create(<Counter counter={1}/>).toJSON();
         |                                           ^
      10 |         expect(component).toMatchSnapshot();
      11 |     })
      12 | })

    Add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.

Answer 1

It turns out to be that the old version of create-react-app doesn't work for snapshot testing after I run npm i create-react-app and add new project it worked. Besides create-react-app make your in watch mode automatically so you don't need to configure anything instead of adding renderer package.