在酶包装查找方法中使用变量答案

【问题标题】：Using a variable in enzyme wrapper find method在酶包装查找方法中使用变量
【发布时间】：2022-01-06 23:41:37
【问题描述】：

通过玩笑 + 酶的学习测试变得笨拙。我有一个数组OptionsArray，其中一些选项映射到组件中的按钮。我认为在组件的测试套件中，我可以这样做

import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { OptionsArray } from './ConfigOptions';
import Foo from './Foo';

describe('Foo', () => {
    let wrapper: ShallowWrapper;
    const numberOfOptions = OptionsArray.length;

    beforeEach(() => (wrapper = shallow(<Foo />)));

    it('renders exactly one Button Item for each option', () => {
        /* eslint-disable-next-line testing-library/no-debugging-utils */
        console.log(wrapper.debug());
        OptionsArray.forEach((option) => {
            console.log(option.value);
        });
        OptionsArray.forEach((option) => {
            expect(wrapper.find(option.value)).toHaveLength(1);
        });
    });
});

我在控制台输出中看到选项很好，但随后我得到：

Foo › renders exactly one Button Item for each option

expect(received).toHaveLength(expected)

Expected length: 1
Received length: 0

所以我猜我错误地将变量传递给find？有没有更好的方法来做到这一点？

添加组件 Foo：

/* Foo.tsx */
import React, { useState } from 'react';
import { Button, ListGroup } from 'react-bootstrap';
import { OptionsArray } from './ConfigOptions';
import './Foo.scss';

const Foo: React.FC<> = () => {
    const [options, setOptions] = useState(OptionsArray);

    return (
        <div className="Foo">
            <ListGroup>
                {OptionsArray.map((option, i) => (
                    <ListGroup.Item key={i}>
                        <Button
                            id={i.toString()}
                            value={option.value}
                            onClick={(e) => handleClick(e.currentTarget.id)}
                            variant={option.isSet ? 'primary' : 'outline-primary'}
                        >
                            {option.value}
                        </Button>
                        {option.content}
                    </ListGroup.Item>
                ))}
            </ListGroup>
        </div>
    );
};

export default Foo;

还有OptionsArray：

import React from 'react';

export const OptionsArray = [
    {
        value: 'OptionA',
        content: (
            <React.Fragment>
                <br />
                <p>Here is a description of OptionA.</p>
            </React.Fragment>
        ),
        isSet: false,
    },
    {
        value: 'OptionB',
        content: (
            <React.Fragment>
                <br />
                <p>Here is a description of OptionB.</p>
            </React.Fragment>
        ),
        isSet: false,
    },
];

【问题讨论】：

请提供组件的代码，以便我们知道您要测试什么
@slideshowp2 是的，添加了！

标签： reactjs typescript jestjs enzyme ts-jest

【解决方案1】：

我想通了。像往常一样，只是我的一个误解。我试图使用find 通过文本获取Button 组件，但这是isn't how find works。相反，我需要使用the findWhere method 和一个谓词来寻找我正在寻找的确切组件。这是我的解决方案：

import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { OptionsArray } from './ConfigOptions';
import Foo from './Foo';

describe('Foo', () => {
    let wrapper: ShallowWrapper;
    const numberOfOptions = OptionsArray.length;

    beforeEach(() => (wrapper = shallow(<Foo />)));

    it('renders exactly one Button Item for each option', () => {
        OptionsArray.forEach((option) => {
            expect(wrapper.find({ value: option.value })).toHaveLength(1);
            const ButtonWithText = wrapper.findWhere((node) => {
                return node.name() === 'Button' && node.text() === option.value;
            });
            expect(ButtonWithText ).toHaveLength(1);
        });
    });
});

【讨论】：