reactjs - 我无法通过快照测试来测试我的 Counter 组件

Question

我曾经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.

Answer 1

事实证明，在我运行并添加它工作的新项目create-react-app后，旧版本的快照测试不起作用。npm i create-react-app除了create-react-app让您自动进入监视模式，因此您无需配置任何内容，而无需添加renderer包。