jest-environment import React from 'react' ; import { render , screen , fireEvent } from '@testing-library/react' ; import '@testing-library/jest-dom/extend-expect' ; import Avatar , { avatarFailback } from '../../src/components/Avatar' ; describe ( 'Avatar' , ( ) => { it ( 'shoule render without error' , async ( ) => { render ( < Avatar src = "./1.jpg" / > ) ; const $img = await screen . findByRole ( 'img' ) ; expect ( $img ) . toBeInTheDocument ( ) ; } ) ; it ( 'should call props handler function when fire event' , async ( ) => { const handleClick = jest . fn ( ) ; const handleMouseEnter = jest . fn ( ) ; const handleMouseLeave = jest . fn ( ) ; render ( < Avatar src = "./1.jpg" onClick = { handleClick } onMouseEnter = { handleMouseEnter } onMouseLeave = { handleMouseLeave } / > ) ; const $img = await screen . findByRole ( 'img' ) ; fireEvent . click ( $img ) ; expect ( handleClick ) . toBeCalled ( ) ; fireEvent . mouseEnter ( $img ) ; expect ( handleMouseEnter ) . toBeCalled ( ) ; fireEvent . mouseLeave ( $img ) ; expect ( handleMouseLeave ) . toBeCalled ( ) ; } ) ; it ( 'shoule use failback avatar when fetch error' , async ( ) => { const src = 'origin.jpg' ; render ( < Avatar src = { src } / > ) ; const $img = ( await screen . findByRole ( 'img' ) ) as HTMLImageElement ; expect ( $img . src ) . toEqual ( expect . stringContaining ( src ) ) ; fireEvent . error ( $img ) ; expect ( $img . src ) . toEqual ( expect . stringContaining ( avatarFailback ) ) ; fireEvent . error ( $img ) ; fireEvent . error ( $img ) ; } ) ; it ( 'shoule not add CDN query params' , async ( ) => { const src = 'data:base64/png;xxx' ; render ( < Avatar src = { src } / > ) ; const $img = ( await screen . findByRole ( 'img' ) ) as HTMLImageElement ; expect ( $img . src ) . not . toEqual ( expect . stringContaining ( 'x-oss-process=' ) ) ; } ) ; } ) ;