reactjs - Jest/Enzyme 浅层测试 React 无状态组件 - wrapper.find() 不工作

Question

我在测试 React SFC 时遇到问题。我想测试“PointDetailConfig”是否有两个“DayHours”组件(可以模拟)。我不知道为什么 wrapper.find() 找不到“DayHours”。它与 React 有状态组件一起工作。收到的值表明“DayHours”是 props.children。我应该断言 wrapper.props().children 吗？感谢您提供有关如何正确测试它的任何提示。

expect(received).toHaveLength(length)

    Expected value to have length:
      2
    Received:
      {Symbol(enzyme.__root__): {Symbol(enzyme.__root__): [Circular], Symbol(enzyme.__unrendered__): <PointDetailConfig increaseCurrentDayPeriod={[]} increaseNextDayPeriod={[]} reduceCurrentDayPeriod={[]} reduceNextDayPeriod={[]} />, Symbol(enzyme.__renderer__): {"batchedUpdates": [Function batchedUpdates], "getNode": [Function getNode], "render": [Function render], "simulateEvent": [Function simulateEvent], "unmount": [Function unmount]}, Symbol(enzyme.__node__): {"instance": null, "key": undefined, "nodeType": "host", "props": {"children": [<DayHours increaseCurrentDayPeriod={[]} increaseHours={[]} increaseNextDayPeriod={[]} name="some name" reduceCurrentDayPeriod={[]} reduceHours={[]} reduceNextDayPeriod={[]} />, <DayHours increaseCurrentDayPeriod={[]} increaseHours={[]} increaseNextDayPeriod={[]} name="some name" reduceCurrentDayPeriod={[]} reduceHours={[]} reduceNextDayPeriod={[]} />]}, "ref": null, "rendered": [{"instance": null, "key": undefined, "nodeType": "function", "props": {"increaseCurrentDayPeriod": [], "increaseHours": [], "increaseNextDayPeriod": [], "name": "Doba bieżąca", "reduceCurrentDayPeriod": [], "reduceHours": [], "reduceNextDayPeriod": []}, "ref": null, "rendered": null, "type": [Function DayHours]}, {"instance": null, "key": undefined, "nodeType": "function", "props": {"increaseCurrentDayPeriod": [], "increaseHours": [], "increaseNextDayPeriod": [], "name": "Doba następna", "reduceCurrentDayPeriod": [], "reduceHours": [], "reduceNextDayPeriod": []}, "ref": null, "rendered": null, "type": [Function DayHours]}], "type": "div"}, Symbol(enzyme.__nodes__): [{"instance": null, "key": undefined, "nodeType": "host", "props": {"children": [<DayHours increaseCurrentDayPeriod={[]} increaseHours={[]} increaseNextDayPeriod={[]} name="some name" reduceCurrentDayPeriod={[]} reduceHours={[]} reduceNextDayPeriod={[]} />, <DayHours increaseCurrentDayPeriod={[]} increaseHours={[]} increaseNextDayPeriod={[]} name="some name" reduceCurrentDayPeriod={[]} reduceHours={[]} reduceNextDayPeriod={[]} />]}, "ref": null, "rendered": [{"instance": null, "key": undefined, "nodeType": "function", "props": {"increaseCurrentDayPeriod": [], "increaseHours": [], "increaseNextDayPeriod": [], "name": "some name", "reduceCurrentDayPeriod": [], "reduceHours": [], "reduceNextDayPeriod": []}, "ref": null, "rendered": null, "type": [Function DayHours]}, {"instance": null, "key": undefined, "nodeType": "function", "props": {"increaseCurrentDayPeriod": [], "increaseHours": [], "increaseNextDayPeriod": [], "name": "some name", "reduceCurrentDayPeriod": [], "reduceHours": [], "reduceNextDayPeriod": []}, "ref": null, "rendered": null, "type": [Function DayHours]}], "type": "div"}], Symbol(enzyme.__options__): {"adapter": {"options": {"lifecycles": {"componentDidUpdate": {"prevContext": true}}, "supportPrevContextArgumentOfComponentDidUpdate": true}}, "attachTo": undefined, "disableLifecycleMethods": true, "hydrateIn": undefined}}, Symbol(enzyme.__unrendered__): null, Symbol(enzyme.__renderer__): {"batchedUpdates": [Function batchedUpdates], "getNode": [Function getNode], "render": [Function render], "simulateEvent": [Function simulateEvent], "unmount": [Function unmount]}, Symbol(enzyme.__node__): undefined, Symbol(enzyme.__nodes__): [], Symbol(enzyme.__options__): {"adapter": {"options": {"lifecycles": {"componentDidUpdate": {"prevContext": true}}, "supportPrevContextArgumentOfComponentDidUpdate": true}}, "attachTo": undefined, "disableLifecycleMethods": true, "hydrateIn": undefined}}
    received.length:
      0

PointDetailConfig.test.js

import React from 'react';
    import renderer from 'react-test-renderer';
    import { shallow, configure, mount } from 'enzyme';
    import Adapter from 'enzyme-adapter-react-15';
    
    import PointDetailConfig from '../PointDetailConfig/PointDetailConfig';
    
    
    configure({ adapter: new Adapter() });
    
    // jest.mock('../PointDetailConfig/DayHours', () => {
    //     return 'DayHours mock';
    // });
    
    describe('PointDetailConfig', () => {
        let wrapper;
        let testProps;
        
        beforeEach(() => {
            testProps = {
    
            };
            wrapper = shallow(<PointDetailConfig {...testProps} />, { disableLifecycleMethods: true });
        });
    
        it('should render correctly', () => {
            const tree = renderer.create(<PointDetailConfig {...testProps} />);
            expect(tree.toJSON()).toMatchSnapshot();
        });
    
        it('should render DayHours', () => {
            console.log(wrapper.find('DayHours'));
            expect(wrapper.find('DayHours')).toHaveLength(2);
        });
    });

PointDetailConfig.js

    import React from 'react';
    import PropTypes from 'prop-types';
    import DayHours from './DayHours';
    
    
    function PointDetailConfig(props) {
        const currentDayProps = {
            increaseHours: props.increaseCurrentDayPeriod,
            reduceHours: props.reduceCurrentDayPeriod,
            name: 'some name',
            ...props
        };
        const nextDayProps = {
            increaseHours: props.increaseNextDayPeriod,
            reduceHours: props.reduceNextDayPeriod,
            name: 'some name',
            ...props
        };
        return (
            <div>
                <DayHours {...currentDayProps} />
                <DayHours {...nextDayProps} />
            </div>
        );
    }
    
    PointDetailConfig.defaultProps = {
        //default props
    };
    
    PointDetailConfig.propTypes = {
        //define proptypes
    };
    
    export default PointDetailConfig;

Answer 1

由于您希望找到组件 DayHours，因此将其导入测试套件并将其作为要查找的组件而不是字符串传递。

import React from 'react';
    import renderer from 'react-test-renderer';
    import { shallow, configure, mount } from 'enzyme';
    import Adapter from 'enzyme-adapter-react-15';
    import DayHours from path/to/DayHours;
    import PointDetailConfig from '../PointDetailConfig/PointDetailConfig';
    
    
    configure({ adapter: new Adapter() });
   
    
    describe('PointDetailConfig', () => {
        let wrapper;
        let testProps;
        
        beforeEach(() => {
            testProps = {
    
            };
            wrapper = shallow(<PointDetailConfig {...testProps} />, { disableLifecycleMethods: true });
        });
    
        it('should render correctly', () => {
            const tree = renderer.create(<PointDetailConfig {...testProps} />);
            expect(tree.toJSON()).toMatchSnapshot();
        });
    
        it('should render DayNominHours', () => {
            console.log(wrapper.find(DayHours));
            expect(wrapper.find(DayHours)).toHaveLength(2);
        });
    });