render ProtoLang from PhonoChangeApplier

src/App.test.js

@@ -6,7 +6,7 @@ import { exportAllDeclaration } from '@babel/types';
 import {render} from '@testing-library/react';
 import extendExpect from '@testing-library/jest-dom/extend-expect'
 
-it('renders without crashing', () => {
+it('renders App without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<App />, div);
   ReactDOM.unmountComponentAtNode(div);

src/PhonoChangeApplier.js

@@ -1,10 +1,14 @@
 import React from 'react';
 import './PhonoChangeApplier.scss';
 
-const PhonoChangeApplier = () => {
-  return (<>
+import ProtoLang from './components/ProtoLang';
 
-  </>);
+const PhonoChangeApplier = () => {
+  return (
+    <div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
+      <ProtoLang />
+    </div>
+  );
 }
 
 export default PhonoChangeApplier;

src/PhonoChangeApplier.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import PhonoChangeApplier from './PhonoChangeApplier';
+import renderer from 'react-test-renderer';
+import { exportAllDeclaration } from '@babel/types';
+import {render} from '@testing-library/react';
+import extendExpect from '@testing-library/jest-dom/extend-expect'
+
+it('renders PhonoChangeApplier without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<PhonoChangeApplier />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+describe('App', () => {
+  it('renders Proto Language Lexicon', () => {
+    const { getByTestId } = render(<PhonoChangeApplier />);
+    expect(getByTestId('PhonoChangeApplier')).toHaveTextContent('Proto Language Lexicon');
+  })
+})

src/components/ProtoLang.js

@@ -2,9 +2,11 @@ import React from 'react';
 import './ProtoLang.scss';
 
 const ProtoLang = () => {
-  return (<>
-  
-  </>);
+  return (
+    <div className="ProtoLang" data-testid="ProtoLang">
+      <h3>Proto Language Lexicon</h3>
+    </div>
+  );
 }
 
 export default ProtoLang;

src/components/ProtoLang.test.js

@@ -6,7 +6,7 @@ import { exportAllDeclaration } from '@babel/types';
 import {render} from '@testing-library/react';
 import extendExpect from '@testing-library/jest-dom/extend-expect'
 
-it('renders without crashing', () => {
+it('renders ProtoLang without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<ProtoLang />, div);
   ReactDOM.unmountComponentAtNode(div);