我无法测试我的计数器组件快照测试答案

【问题标题】：I cant test my Counter component a snapshot test我无法测试我的计数器组件快照测试
【发布时间】：2020-10-02 23:40:16
【问题描述】：

我使用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.

【问题讨论】：

标签： reactjs testing snapshot react-test-renderer

【解决方案1】：

在我运行npm i create-react-app 并添加新项目后，旧版本的create-react-app 无法用于快照测试。除了create-react-app 让你自动进入监视模式，所以你不需要配置任何东西，而不是添加renderer 包。

【讨论】：