如何使用 enzyme jest 检查条件渲染？

Question

我想根据布尔值检查条件

 export const Button:React.FunctionComponent<ButtonProps>
 const [loading, setLoading] = React.useState(false)

return(
<container
  color={props.color},
  border={5}
>
{loading ? <itemlist /> : props.title}
/>
)

我想测试加载是否正确然后渲染“如果不只是显示一些标题

我想为此添加一些测试用例

我试过了，但我想这似乎是错误的方法

test('check if loading is true', () => {
const isloadedProp = {
  loading: false
}

const output = mount(<Button {...ButtonProps} />)
expect(output.find(container).find(itemlist)).toBeFalsy()
expect(output.find(container).title).toBe('ABC')

任何建议或答案

Answer 1

您可以尝试 jest.spyOn() 来控制 React.useState 调用。

const useStateSpy = jest.spyOn(React, 'useState');
const setLoadingMock = jest.fn();
let isLoadingState = true;
useStateSpy.mockImplementation(() => [isLoadingState, setLoadingMock]);

test('check if loading is true', () => {
  isLoadingState = true;
  // [loading, setLoading] = React.useState() will result in
  // loading = true, setLoading = setLoadingMock
  // your test code
});

test('check if loading is false', () => {
  isLoadingState = false;
  // [loading, setLoading] = React.useState() will result in
  // loading = false, setLoading = setLoading Mock
  // your test code
});

更新：重写为仅使用道具而不是状态

正如所讨论的，这里是使用 isLoading 属性而不是 useState 的 Button 组件的解决方案。

Button.js

import React from 'react';
import Container from '....'; // insert path to Container component here
import ItemList from '....'; // insert path to ItemList component here

const Button = props => {
    return (
        <Container
            color={props.color}
            border={5}
        >
            {props.isLoading ? <Itemlist /> : props.title}
        </Container>
    );
};

export default Button;

请注意，组件名称应始终以大写字母开头，以便 React 区分 HTML 标记和组件。

Button.test.js

import React from 'react';
import { mount } from 'enzyme';
import Button from './Button';

const ButtonProps = {
    color: 'red',
    title: 'ABC',
};

describe('when isLoading === true', () => {
    let output;
    beforeAll(() => {
        output = mount(<Button {...ButtonProps} isLoading />);
    });

    test('ItemList is rendered', () => {
        expect(output.find('Itemlist')).toHaveLength(1);
    });

    test('title is not rendered', () => {
        expect(output.find('Container').text()).not.toContain('ABC');
    });
});

describe('when isLoading === false', () => {
    let output;
    beforeAll(() => {
        output = mount(<Button {...ButtonProps} isLoading={false} />);
    });

    test('ItemList is not rendered', () => {
        expect(output.find('Itemlist')).toHaveLength(0);
    });

    test('title is rendered', () => {
        expect(output.find('Container').text()).toContain('ABC');
    });
});

如何使用 enzyme jest 检查条件渲染？

How to check the condition render using enzyme jest?

reactjs

jestjs

enzyme

react-testing-library