我无法对我的Counter组件进行快照测试

问题描述

我使用create-react-app设置了我的应用程序。我正在尝试测试Counter组件，但此错误不断发生，我不太了解错误是什么，请您帮我。

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.

解决方法

事实证明，在我运行create-react-app并添加新的项目后，旧版本的npm i create-react-app无法用于快照测试。除了create-react-app之外，您还可以自动进入监视模式，因此无需添加renderer程序包即可进行任何配置。