Setup jest environment via config, update tests, and add dependencies

Author: ryanhefner

jest.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+}

package.json

@@ -97,6 +97,7 @@
     "greenkeeper-lockfile": "^1.15.1",
     "gzip-size": "^7.0.0",
     "jest": "^29.6.1",
+    "jest-environment-jsdom": "^29.6.1",
     "prettier": "^3.0.0",
     "pretty-bytes": "^6.1.0",
     "react": "^18.2.0",

src/Timecode.test.js

@@ -1,13 +1,12 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { Timecode } from './Timecode'
+import Timecode from '.'
 
 describe('<Timecode />', () => {
   test('render markup - default component', async () => {
     const { container, getByText } = render(<Timecode />)
 
-    expect(getByText('0:00')).toBeInTheDocument()
+    expect(getByText('0:00')).toBeTruthy()
     expect(container).toMatchSnapshot()
   })
 
@@ -20,79 +19,79 @@ describe('<Timecode />', () => {
   test('render format - H:?m:ss (default)', async () => {
     const { getByText } = render(<Timecode />)
 
-    expect(getByText('0:00')).toBeInTheDocument()
+    expect(getByText('0:00')).toBeTruthy()
   })
 
   test('render format - H:?mm:ss', async () => {
     const { getByText } = render(<Timecode format="H:?mm:ss" />)
 
-    expect(getByText('00:00')).toBeInTheDocument()
+    expect(getByText('00:00')).toBeTruthy()
   })
 
   test('render format - HH:mm:ss.SSS', async () => {
     const { getByText } = render(<Timecode format="HH:mm:ss.SSS" />)
 
-    expect(getByText('00:00:00.000')).toBeInTheDocument()
+    expect(getByText('00:00:00.000')).toBeTruthy()
   })
 
   test('render format - H:mm:ss.SSS', async () => {
     const { getByText } = render(<Timecode format="H:mm:ss.SSS" />)
 
-    expect(getByText('0:00:00.000')).toBeInTheDocument()
+    expect(getByText('0:00:00.000')).toBeTruthy()
   })
 
   test('render format - H:?mm:ss.SSS', async () => {
     const { getByText } = render(<Timecode format="H:?mm:ss.SSS" />)
 
-    expect(getByText('00:00.000')).toBeInTheDocument()
+    expect(getByText('00:00.000')).toBeTruthy()
   })
 
   test('render format - H:?m:ss.SSS', async () => {
     const { getByText } = render(<Timecode format="H:?m:ss.SSS" />)
 
-    expect(getByText('0:00.000')).toBeInTheDocument()
+    expect(getByText('0:00.000')).toBeTruthy()
   })
 
   test('render format - HH:mm:ss', async () => {
     const { getByText } = render(<Timecode format="HH:mm:ss" />)
 
-    expect(getByText('00:00:00')).toBeInTheDocument()
+    expect(getByText('00:00:00')).toBeTruthy()
   })
 
   test('render format - H:mm:ss', async () => {
     const { getByText } = render(<Timecode format="H:mm:ss" />)
 
-    expect(getByText('0:00:00')).toBeInTheDocument()
+    expect(getByText('0:00:00')).toBeTruthy()
   })
 
   test('render format - H:?mm:ss', async () => {
     const { getByText } = render(<Timecode format="H:?mm:ss" />)
 
-    expect(getByText('00:00')).toBeInTheDocument()
+    expect(getByText('00:00')).toBeTruthy()
   })
 
   test('render format - H:mm', async () => {
     const { getByText } = render(<Timecode format="H:mm" />)
 
-    expect(getByText('0:00')).toBeInTheDocument()
+    expect(getByText('0:00')).toBeTruthy()
   })
 
   test('render format - s.SSS', async () => {
     const { getByText } = render(<Timecode format="s.SSS" />)
 
-    expect(getByText('0.000')).toBeInTheDocument()
+    expect(getByText('0.000')).toBeTruthy()
   })
 
   test('render format - s.SS', async () => {
     const { getByText } = render(<Timecode format="s.SS" />)
 
-    expect(getByText('0.00')).toBeInTheDocument()
+    expect(getByText('0.00')).toBeTruthy()
   })
 
   test('render format w/ time - H:?m:ss (default)', async () => {
     const { getByText } = render(<Timecode time={3600000} />)
 
-    expect(getByText('1:00:00')).toBeInTheDocument()
+    expect(getByText('1:00:00')).toBeTruthy()
   })
 
   test('render format w/ time - H:?mm:ss.SSS', async () => {
@@ -103,7 +102,7 @@ describe('<Timecode />', () => {
       />
     ))
 
-    expect(getByText('1:00:00.000')).toBeInTheDocument()
+    expect(getByText('1:00:00.000')).toBeTruthy()
   })
 
   test('render format w/ time - H:?m:ss.SSS', async () => {
@@ -114,7 +113,7 @@ describe('<Timecode />', () => {
       />
     ))
 
-    expect(getByText('1:00:00.000')).toBeInTheDocument()
+    expect(getByText('1:00:00.000')).toBeTruthy()
   })
 
   test('render format w/ time - H:?mm:ss', async () => {
@@ -125,30 +124,30 @@ describe('<Timecode />', () => {
       />
     ))
 
-    expect(getByText('1:00:00')).toBeInTheDocument()
+    expect(getByText('1:00:00')).toBeTruthy()
   })
 
   test('render format w/ minutes - H:?m:ss (default)', async () => {
     const { getByText } = render(<Timecode time={5400000} />)
 
-    expect(getByText('1:30:00')).toBeInTheDocument()
+    expect(getByText('1:30:00')).toBeTruthy()
   })
 
   test('render format w/ seconds - H:?m:ss (default)', async () => {
     const { getByText } = render(<Timecode time={5430000} />)
 
-    expect(getByText('1:30:30')).toBeInTheDocument()
+    expect(getByText('1:30:30')).toBeTruthy()
   })
 
   test('render prefix', async () => {
     const { getByText } = render(<Timecode prefix="-" />)
 
-    expect(getByText('-0:00')).toBeInTheDocument()
+    expect(getByText('-0:00')).toBeTruthy()
   })
 
   test('render postfix', async () => {
     const { getByText } = render(<Timecode postfix="/left" />)
 
-    expect(getByText('0:00/left')).toBeInTheDocument()
+    expect(getByText('0:00/left')).toBeTruthy()
   })
 })