more precise unit testing

src/components/__tests__/Editor.spec.tsx

@@ -8,12 +8,11 @@ test('should render default editor',() => {
     expect(el).toBeDefined();
 });
 
-test.skip('should render new html when user edits',() => {
-    render(<Editor />);
-    const markdown = "mbare" 
+test('should render new html when user edits',() => {
+    const {container } = render(<Editor />);
+    const markdown = "mbare";
     const editor = screen.getByRole('textbox');
-    fireEvent.change(editor, {target:{ value: markdown}})
-    const preview = screen.getByTitle('editor-preview').nodeValue; 
-   expect(preview).toContain('mbare');
+    fireEvent.change(editor, {target:{ value: markdown}})    
+   expect(container.getElementsByClassName('preview').item(0)?.innerHTML).toEqual('<p>mbare</p>');
 });
 

src/components/__tests__/Preview.spec.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { render, screen } from "@testing-library/react"; // Importing the render function from the testing library
 import Preview from "../Preview"; // Importing the Header component
+import { markdownHeaderLevelOne } from '../../constants/test.mocks';
 
 test('should render last markdown from user',() => {
-    const markdown = "mbare";
-
-    render(<Preview md={markdown}/>);
-    const el = screen.getByText(markdown);
-    expect(el).toBeDefined();
+    const markdown = markdownHeaderLevelOne;
+    const expected = 'A first-level heading';
+    const {container} = render(<Preview md={markdown}/>);    
+    expect(container.getElementsByTagName('h1').item(0)?.innerHTML).toEqual(expected);
 });
 
 

src/hooks/useLocalStorage.ts

@@ -14,7 +14,6 @@ const useLocalStorage = (key: string , defaultValue: string) => {
         localStorage.getItem(key) || String(defaultValue)
       );
     } catch (error) {
-      console.error(error);
       currentValue = defaultValue;
     }