test: replace enzyme with testing-library, add dom serializer

jest.config.base.js

@@ -1,8 +1,7 @@
 module.exports = {
   preset: 'es-jest',
   testEnvironment: 'node',
-  setupFiles: [require.resolve('./jest.setup.js')],
-  snapshotSerializers: ['enzyme-to-json/serializer'],
+  setupFiles: [require.resolve('./jest/setup.js')],
   collectCoverageFrom: [
     'src/**/*.{js,jsx,ts,tsx}',
     // 约定：入口文件只包含 import/export，不执行逻辑
@@ -11,4 +10,5 @@ module.exports = {
     '!src/**/types.ts',
   ],
   testPathIgnorePatterns: ['/__mocks__/'],
+  snapshotSerializers: [require.resolve('./jest/prettier-dom.js')],
 }

jest/prettier-dom.js

@@ -0,0 +1,8 @@
+import prettier from 'prettier'
+
+module.exports = {
+  test: (v) => typeof Element !== 'undefined' && v instanceof Element,
+  print: (v) => {
+    return prettier.format(v.outerHTML, {parser: 'html'})
+  },
+}

jest.setup.js → jest/setup.js

@@ -1,9 +1,5 @@
-import Enzyme from 'enzyme'
-import Adapter from 'enzyme-adapter-react-16'
 import * as Aphrodite from 'aphrodite'
 import * as AphroditeNoImportant from 'aphrodite/no-important'
 
 Aphrodite.StyleSheetTestUtils.suppressStyleInjection()
 AphroditeNoImportant.StyleSheetTestUtils.suppressStyleInjection()
-
-Enzyme.configure({adapter: new Adapter()})

package.json

@@ -53,14 +53,10 @@
     "@rollup/plugin-typescript": "^8.2.5",
     "@testing-library/react": "^12.1.0",
     "@testing-library/react-hooks": "^7.0.2",
-    "@types/enzyme": "^3.10.9",
     "@types/jest": "^27.0.1",
     "@typescript-eslint/eslint-plugin": "^4.31.0",
     "@typescript-eslint/parser": "^4.31.0",
     "commitlint": "^7.5.2",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.11.2",
-    "enzyme-to-json": "^3.3.5",
     "es-jest": "^1.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
@@ -73,6 +69,7 @@
     "lerna": "^3.13.1",
     "lint-staged": "^8.1.5",
     "prettier": "^2.3.2",
+    "react-test-renderer": "^17.0.2",
     "rollup": "^2.48.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",

packages/griffith/src/components/Slider.tsx

@@ -241,7 +241,11 @@ class Slider extends Component<SliderProps, State> {
           onMouseDown: this.handleDragStart,
         }
     return (
-      <div className={this.getClassName('root')} {...interactionProps}>
+      <div
+        className={this.getClassName('root')}
+        {...interactionProps}
+        role="slider"
+      >
         <div className={this.getClassName('inner')}>
           <div ref={this.trackRef} className={this.getClassName('track')}>
             {Boolean(buffered) && (

packages/griffith/src/components/Timeline.tsx

@@ -14,7 +14,7 @@ export type TimelineProps = {
   onSeek?: (...args: any[]) => any
   onProgressDotHover?: (...args: any[]) => any
   onProgressDotLeave?: (...args: any[]) => any
-} & SliderProps
+} & Omit<SliderProps, 'styles'>
 
 export type TimelineState = {
   isHovered: boolean

packages/griffith/src/components/__tests__/Hover.spec.tsx

@@ -1,31 +1,35 @@
 import React from 'react'
-import {shallow} from 'enzyme'
+import {render, fireEvent, screen} from '@testing-library/react'
 import Hover from '../Hover'
 
 describe('Hover', () => {
   it('get Hover component', () => {
     const handleMouseEnter = jest.fn()
-    const handlemouseLeave = jest.fn()
-    const wrapper = shallow(
+    const handleMouseLeave = jest.fn()
+    let hovering = false
+    const result = render(
       <Hover
         className="hover"
         onMouseEnter={handleMouseEnter}
-        onMouseLeave={handlemouseLeave}
+        onMouseLeave={handleMouseLeave}
       >
-        {(isHovered) => <button>{isHovered ? 'button' : 'input'}</button>}
+        {(isHovered) => {
+          hovering = isHovered
+          return <button>{isHovered ? 'button' : 'input'}</button>
+        }}
       </Hover>
     )
-    expect(wrapper).toMatchSnapshot()
-    expect(wrapper.state().isHovered).toBeFalsy()
+    expect(result.container).toMatchSnapshot()
+    expect(hovering).toBeFalsy()
 
     // PointerEnter
-    wrapper.simulate('mouseenter')
-    expect(wrapper.state().isHovered).toBeTruthy()
+    fireEvent.mouseEnter(screen.getByRole('button'))
     expect(handleMouseEnter).toBeCalled()
+    expect(hovering).toBeTruthy()
 
     // PointerLeave
-    wrapper.simulate('mouseleave')
-    expect(wrapper.state().isHovered).toBeFalsy()
-    expect(handlemouseLeave).toBeCalled()
+    fireEvent.mouseLeave(screen.getByRole('button'))
+    expect(handleMouseLeave).toBeCalled()
+    expect(hovering).toBeFalsy()
   })
 })

packages/griffith/src/components/__tests__/Icon.spec.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
-import {render} from 'enzyme'
+import Renderer from 'react-test-renderer'
 import Icon from '../Icon'
 import * as icons from '../icons/controller'
 
 describe('Icon', () => {
   it('get Icon component', () => {
-    const wrapper = render(<Icon icon={icons.smallscreen} />)
-    expect(wrapper).toMatchSnapshot()
+    expect(
+      Renderer.create(<Icon icon={icons.smallscreen} />).toJSON()
+    ).toMatchSnapshot()
   })
 })

packages/griffith/src/components/__tests__/Layer.spec.tsx

@@ -1,17 +1,20 @@
 import React from 'react'
-import {shallow} from 'enzyme'
+import {render} from '@testing-library/react'
+import ObjectFitProvider from '../../contexts/ObjectFitProvider'
 import Layer from '../Layer'
 
 describe('Layer', () => {
   it('get Layer component', () => {
-    const wrapper1 = shallow(<Layer />)
-    expect(wrapper1).toEqual({})
+    const result1 = render(<Layer />)
+    expect(result1.container.innerHTML).toMatchSnapshot()
 
-    const wrapper2 = shallow(
-      <Layer>
-        <span>123</span>
-      </Layer>
+    const result2 = render(
+      <ObjectFitProvider initialObjectFit="cover">
+        <Layer>
+          <span>123</span>
+        </Layer>
+      </ObjectFitProvider>
     )
-    expect(wrapper2).toMatchSnapshot()
+    expect(result2.container.innerHTML).toMatchSnapshot()
   })
 })

packages/griffith/src/components/__tests__/Loader.spec.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import {render} from 'enzyme'
+import Renderer from 'react-test-renderer'
 import Loader from '../Loader'
 
 describe('Loader', () => {
   it('get Loader component', () => {
-    const wrapper = render(<Loader />)
-    expect(wrapper).toMatchSnapshot()
+    expect(Renderer.create(<Loader />).toJSON()).toMatchSnapshot()
   })
 })

packages/griffith/src/components/__tests__/MinimalTimeline.spec.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import {shallow} from 'enzyme'
+import {render} from '@testing-library/react'
 import MinimalTimeline from '../MinimalTimeline'
 
 describe('MinimalTimeline', () => {
   it('get MinimalTimeline component', () => {
-    const wrapper = shallow(
+    const result = render(
       <MinimalTimeline
         buffered={0}
         duration={182.234}
@@ -13,10 +13,17 @@ describe('MinimalTimeline', () => {
       />
     )
 
-    expect(wrapper).toMatchSnapshot()
+    expect(result.container).toMatchSnapshot()
 
-    wrapper.setProps({show: true})
+    result.rerender(
+      <MinimalTimeline
+        buffered={0}
+        duration={182.234}
+        currentTime={60}
+        show={true}
+      />
+    )
 
-    expect(wrapper).toMatchSnapshot()
+    expect(result.container).toMatchSnapshot()
   })
 })

packages/griffith/src/components/__tests__/Time.spec.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import {render} from 'enzyme'
+import Renderer from 'react-test-renderer'
 import Time from '../Time'
 
 describe('Time', () => {
   it('get Time component', () => {
-    expect(render(<Time value={904} />)).toMatchSnapshot()
-    expect(render(<Time />)).toMatchSnapshot()
+    expect(Renderer.create(<Time value={904} />).toJSON()).toMatchSnapshot()
+    expect(Renderer.create(<Time />).toJSON()).toMatchSnapshot()
   })
 })

packages/griffith/src/components/__tests__/Timeline.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import {shallow} from 'enzyme'
-import Timeline, {TimelineProps, TimelineState} from '../Timeline'
+import {render, fireEvent, screen} from '@testing-library/react'
+import Timeline from '../Timeline'
 
 describe('Timeline', () => {
   it('get Timeline component', () => {
@@ -10,7 +10,7 @@ describe('Timeline', () => {
     const onDragStart = jest.fn()
     const onProgressDotHover = jest.fn()
     const onProgressDotLeave = jest.fn()
-    const wrapper = shallow<Timeline, TimelineProps, TimelineState>(
+    render(
       <Timeline
         buffered={7}
         total={182.234}
@@ -24,43 +24,17 @@ describe('Timeline', () => {
       />
     )
 
-    expect(wrapper).toMatchSnapshot()
-
-    expect(wrapper.state().progressDotHovered).toBeFalsy()
-
-    expect(wrapper.state().isHovered).toBeFalsy()
-
-    // PointerEnter
-    wrapper.simulate('mouseenter')
-    expect(wrapper.state().isHovered).toBeTruthy()
-
-    // PointerLeave
-    wrapper.simulate('mouseleave')
-    expect(wrapper.state().isHovered).toBeFalsy()
-
-    expect(wrapper.state().isFocused).toBeFalsy()
-    // focus event
-    wrapper.find('Slider').simulate('focus')
-    expect(wrapper.state().isFocused).toBeTruthy()
-
-    // blur event
-    wrapper.find('Slider').simulate('blur')
-    expect(wrapper.state().isFocused).toBeFalsy()
-
-    expect(wrapper.state().isDragging).toBeFalsy()
-    // focus event
-    wrapper.find('Slider').simulate('dragstart')
-    expect(wrapper.state().isDragging).toBeTruthy()
+    fireEvent.mouseDown(screen.getByRole('slider'))
     expect(onDragStart).toBeCalled()
 
-    // blur event
-    wrapper.find('Slider').simulate('dragend')
-    expect(wrapper.state().isDragging).toBeFalsy()
+    fireEvent.mouseUp(screen.getByRole('slider'), {clientX: 100})
     expect(onDragEnd).toBeCalled()
+    expect(onChange).toBeCalled()
 
     // handle change
-    wrapper.instance().handleChange(47)
-    expect(onChange).toBeCalled()
+    onChange.mockClear()
+    fireEvent.keyDown(screen.getByRole('slider'), {keyCode: 39})
+    expect(onChange).toHaveBeenCalledWith(expect.any(Number))
     expect(onSeek).toBeCalled()
   })
 })

packages/griffith/src/components/__tests__/Tooltip.spec.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
-import {render} from 'enzyme'
+import Renderer from 'react-test-renderer'
 import Tooltip from '../Tooltip'
 
 describe('Tooltip', () => {
   it('get Tooltip component', () => {
-    expect(render(<Tooltip content="高清" />)).toMatchSnapshot()
+    expect(
+      Renderer.create(<Tooltip content="quality-hd" />).toJSON()
+    ).toMatchSnapshot()
   })
 })

packages/griffith/src/components/__tests__/VolumeSlide.spec.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
-import {render} from 'enzyme'
+import Renderer from 'react-test-renderer'
 import VolumeSlider from '../VolumeSlider'
 
 describe('VolumeSlider', () => {
   it('get VolumeSlider component', () => {
-    expect(render(<VolumeSlider total={1} value={0.5} />)).toMatchSnapshot()
+    expect(
+      Renderer.create(<VolumeSlider total={1} value={0.5} />).toJSON()
+    ).toMatchSnapshot()
   })
 })

packages/griffith/src/components/__tests__/__snapshots__/Hover.spec.tsx.snap

@@ -1,13 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Hover get Hover component 1`] = `
-<div
-  className="hover"
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
->
-  <button>
-    input
-  </button>
+<div>
+  <div class="hover"><button>input</button></div>
 </div>
+
 `;

packages/griffith/src/components/__tests__/__snapshots__/Icon.spec.tsx.snap

@@ -2,10 +2,10 @@
 
 exports[`Icon get Icon component 1`] = `
 <span
-  class="root_s9vkyf"
+  className="root_s9vkyf"
 >
   <svg
-    class="svg_11u3rwe"
+    className="svg_11u3rwe"
     viewBox="0 0 24 24"
   >
     <path

packages/griffith/src/components/__tests__/__snapshots__/Layer.spec.tsx.snap

@@ -1,13 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Layer get Layer component 1`] = `
-<Positioned>
-  <div
-    className="layer_120lr3k"
-  >
-    <span>
-      123
-    </span>
-  </div>
-</Positioned>
-`;
+exports[`Layer get Layer component 1`] = `""`;
+
+exports[`Layer get Layer component 2`] = `"<div class=\\"layer_120lr3k\\"><span>123</span></div>"`;

packages/griffith/src/components/__tests__/__snapshots__/Loader.spec.tsx.snap

@@ -2,14 +2,14 @@
 
 exports[`Loader get Loader component 1`] = `
 <div
-  class="root_3a2vkm"
+  className="root_3a2vkm"
 >
   <svg
-    class="svg_1v9ybk"
+    className="svg_1v9ybk"
     viewBox="0 0 64 64"
   >
     <circle
-      class="circle_11txi2m"
+      className="circle_11txi2m"
     />
   </svg>
 </div>