如何使用酶笑话检查条件渲染？答案

【问题标题】：How to check the condition render using enzyme jest?如何使用酶笑话检查条件渲染？
【发布时间】：2021-03-02 03:00:00
【问题描述】：

我想根据布尔值检查条件

 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')

任何建议或答案

【问题讨论】：

标签： reactjs jestjs enzyme react-testing-library

【解决方案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');
    });
});

【讨论】：

我不能在没有使用状态的间谍的情况下写作
说我有 prop isloading true 检查 itemlist 是否为真，如果 isloading 为 false 是否为假并获取文本数据
loading 是Button 组件的内部状态，很难访问它。按照您的建议将其更改为道具会更容易测试，因为您的组件只会对道具做出反应。
我可以知道如何通过更改道具加载值而不是检查状态来进行检查
用另一个示例更新了答案，该示例仅使用道具并测试是否存在/不存在 ItemList 以及要显示的标题。