[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的主要内容,如果未能解决你的问题,请参考以下文章
[React Testing] Error State with React Testing Library, findBy*