test: apply zero heading test at TOC components

apps/blog/src/components/DateAndCategoryLink/DateAndCategoryLink.test.tsx

@@ -6,7 +6,7 @@ import DateAndCategoryLink from './DateAndCategoryLink';
 const DATE = '2022-04-14';
 const CATEGORY = 'Guide';
 
-describe('blog - component - DateAbdCategoryLink', () => {
+describe('blog - component - DateAndCategoryLink', () => {
   it('should', () => {
     render(<DateAndCategoryLink date={DATE} category={CATEGORY} />);
     expect(screen.getByText(CATEGORY)).toBeInTheDocument();

apps/blog/src/components/TOC/TOC.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import TOC from './TOC';
+
+jest.spyOn(React, 'useRef').mockImplementation(() => ({
+  current: {
+    observe: jest.fn(),
+    disconnect: jest.fn(),
+  },
+}));
+jest.spyOn(React, 'useEffect').mockImplementation(f => f());
+
+describe('blog - TOC', () => {
+  beforeAll(() => {});
+
+  it('does not render when zero headings', () => {
+    render(<TOC />);
+    expect(screen.queryByText('Contents')).not.toBeInTheDocument();
+  });
+});

apps/blog/src/components/TOC/TOC.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/router';
 import styled from '@emotion/styled';
 import { Link, NextUITheme, useTheme } from '@nextui-org/react';