Question

我正在学习编写测试，但我无法模拟来自我的组件的函数。为简洁起见，删除了一些代码。默认情况下，Banner将呈现4 BannerItem个。但在我的测试中，我想测试只渲染一个BannerItem。我一直在引用其他示例来尝试模拟我的函数，但似乎无法解决它。

const renderSlides = (numberOfSlides, activeSlide) => (
    range(1, numberOfSlides + 1).map((slide, i) => (
        <BannerItem
            key={i}
            index={i}
        />
    ))
);

class Banner extends Component {
    constructor(props) {
        super(props);
        this.state = { activeSlide: 1 };
    }

    setBannerState(state) {
        this.setState({ activeSlide: state });
    }

    render() {
        const numberOfSlides = 4;
        return (
            <div>
                {renderSlides(numberOfSlides, this.state.activeSlide)}
            </div>
        );
    }
}

测试

import React from 'react';
import { shallow } from 'enzyme';
import { PureBanner } from '../../../../src/modules/banners/Banner';

describe('<Banner />', () => {
    const mock = jest.fn();

    let component;

    it('render banner with one item', () => {
        component = shallow(<PureBanner {...props} />);
        component.instance().renderSlides = jest.fn();
        component.update();
        component.instance().renderSlides(1, component.state().activeSlide);
        expect(component.find('BannerItem')).toHaveLength(1);
    });
}

Answer 1

您需要定义jest.fn()模拟实现。现在它没有做任何事情。

因此，您可以将测试更新为

component.instance().renderSlides = jest.fn(() => [<BannerItem/>]);

参见示例strconv.Itoa。

小心过度嘲笑;我鼓励你按原样保留该方法，并找到一种方法来验证没有模拟的结果，如果可能的话

React / Jest：来自React组件的模拟函数

1 个答案: