18、React项目中集成Ace代码编辑器及相关服务搭建

React项目中集成Ace代码编辑器及相关服务搭建

1. 练习组件添加

首先，我们要在React应用中添加一个基于类的组件来展示练习内容。
- 测试文件添加 ：在 services/client/src/components/__tests__/ 目录下创建 Exercises.test.jsx 文件，代码如下：

import React from 'react';
import { shallow, mount } from 'enzyme';
import renderer from 'react-test-renderer';
import Exercises from '../Exercises';

test('Exercises renders properly', () => {
  const wrapper = shallow(<Exercises/>);
  const element = wrapper.find('h4');
  expect(element.length).toBe(1);
});

test('Exercises renders a snapshot properly', () => {
  const tree = renderer.create(<Exercises/>).toJSON();
  expect(tree).toMatchSnapshot();
});

test('Exercises will call componentWi