React-Pose fails Jest Snapshot test

[spencersmb]

Bug Report

• react-pose version: 4.0.6
• Jest version: 24.1.0
• Jest-dom: 3.0.2

TypeScript code being tested

import posed, { PoseGroup } from 'react-pose';
import styled from 'styled-components'
import React, { useState, useEffect, useRef, RefObject } from 'react'

export const LoginModal = ({options, closeModal}: IModalOptions) =>{
  
  const [name, setName] = useState(options.name)
  const firstRender = useRef(true)

  useEffect(()=>{
    return()=>{
      firstRender.current = true
    }
  }, [])

  function changeName(newName: string){
    return ()=>{
      setName(newName)
      firstRender.current = false
    }
  }

  return (
    <LoginModalWrapper>
      <LoginModalContent>
        <div style={{background: '#7ACC28'}} className='content'>
          Left content
        </div>
        <ContentContainer modalHeight={name}>
          <PoseGroup>
             <div key='test> Item </div>
          </PoseGroup>
        </ContentContainer>
      </LoginModalContent>

      <button className='jestCartToggle' onClick={closeModal}>Close</button>
    </LoginModalWrapper>
  )
}

export default LoginModal

const LoginModalWrapper = styled.div`
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
`
const LoginModalContent = styled.div`
	position: relative;
	display: flex;
	flex-direction: row;
	flex: 1;
`
const ContentContainer = styled.div<any>`
	position: relative;
	width: 320px;
	transition: height .2s;
	//transition-delay: .3s;
	height: ${(props) => props.modalHeight === 'signup' ? `500px` : `280px`};
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
`

export default LoginModal

Actual behavior

Snapshot fails with this error:

Test File

import React from 'react'
import renderer from 'react-test-renderer'
import { cleanup, render } from 'react-testing-library'
import {LoginModal} from '../login'

afterEach(cleanup)
const close = jest.fn()
const initialProps = {
	closeModal: close,
	options:{
		name: 'signin',
		content: ''
	}
}
describe('Login Modal', () => {

	// React pose wont render snapshots by default
	it('renders correctly', () => {
		const tree = renderer
			.create(<LoginModal {...initialProps}/>)
			.toJSON()
		expect(tree).toMatchSnapshot()
	})
})

Expected behavior

Should complete a snapshot for the test using Jest and jest-dom by default.

[Andarist]

this is by design of the react-test-renderer, see advise here - facebook/react#7740 (comment) . I would recommend using react-testing-library instead

[spencersmb]

Yea I already do and it works great. Was wondering if there was a work around.
Thanks @Andarist