[React Testing] Mock react-transition-group in React Component Tests with jest.mock

Posted answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[React Testing] Mock react-transition-group in React Component Tests with jest.mock相关的知识,希望对你有一定的参考价值。

There are some situations where you want to focus your tests on a particular component and not any of its children. There are other situations where you want to mock out the behavior of components that your component renders. In the case of react-transition-group, we don’t want to have to wait until the transition has completed before we can go on with our tests. Let’s see how we can mock the implementation of react-transition-group using jest.mock to make our tests more reliable and easier to write and maintain.

 

Component:

import React from ‘react‘
import { CSSTransition } from ‘react-transition-group‘

function Fade(props) {
  return (
    <CSSTransition unmountOnExit timeout={1000} classNames="fade" {...props} />
  )
}

function HiddenMessage({ children }) {
  const [show, setShow] = React.useState(false)
  const toggle = () => setShow((s) => !s)
  return (
    <div>
      <button onClick={toggle}>Toggle</button>
      <Fade in={show}>
        <div>{children}</div>
      </Fade>
    </div>
  )
}

export { HiddenMessage }

 

Test:

import { render, fireEvent } from @testing-library/react
import { HiddenMessage } from ../extra/hidden-message

jest.mock(‘react-transition-group‘, {
  CssTransition: (props) => {
    return props.in ? props.children : null
  },
})

test(show hidden message when toggle is clicked, () => {
  const message = Hello World
  const { getByText, queryByText } = render(
    <HiddenMessage>{message}</HiddenMessage>,
  )
  const button = getByText(/toggle/i)
  expect(queryByText(message)).not.toBeInTheDocument()
  fireEvent.click(button)
  expect(queryByText(message)).toBeInTheDocument()
  fireEvent.click(button)
  expect(queryByText(message)).not.toBeInTheDocument()
})

 

以上是关于[React Testing] Mock react-transition-group in React Component Tests with jest.mock的主要内容,如果未能解决你的问题,请参考以下文章

Google Mock:测试对象的某个属性

React源码分析=; Reac初次渲染分析

React源码分析=; Reac初次渲染分析

Reac.jst基础教学

reac中useCallback使用

[React Testing] Error State with React Testing Library, findBy*