Reactjs 如何在使用酶测试时渲染渲染道具内的元素

我有一个具有这种结构的组件

return <Element>
            {(a, b): React.ReactElement => (
               ...some elements here
         )}
        </Element>;

我的问题是，通常通过什么方法进入这个函数来检查它返回的元素

我的测试

import React from 'react';

import {createShallow} from '@material-ui/core/test-utils';

import Component from './Component';

let shallow;

function setup() {
    const props = {};

    const wrapper = shallow(<Component {...props} />);

    return {
        props,
        wrapper,
    };
}

beforeAll(() => {
    shallow = createShallow({ dive: true });
});

describe('Components', () => {
    describe('Element', () => {
        it('Should render self', () => {
            const {wrapper, props} = setup();

            console.log(wrapper.debug())

            expect(wrapper.exists()).toBeTruthy();
        });
    });
});

从“React”导入React；
从“@material ui/core/test utils”导入{createshall}；
从“./Component”导入组件；
让浅；
函数设置（）{
const props={}；
常量包装器=浅（）；
返回{
道具，
包装纸，
};
}
以前（（）=>{
shallow=createShallow（{dive:true}）；
});
描述（'组件'，（）=>{
描述（'Element'，（）=>{
它（'应该呈现自我'，（）=>{
const{wrapper，props}=setup（）；
console.log（wrapper.debug（））
expect（wrapper.exists（））.toBeTruthy（）；
});
});
});

有两种解决方案：

使用

wrapper.dive（）

或

wrapper.shallow（）

，这将导致

shallowRapper

呈现顶级组件的子级。但是，我不建议使用

shallow

，因为它有很多问题，而且您刚刚经历过一个问题-它不会渲染所有内容

使用

mount

而不是

shallow

，默认情况下会呈现子函数

import React from 'react';

import {createShallow} from '@material-ui/core/test-utils';

import Component from './Component';

let shallow;

function setup() {
    const props = {};

    const wrapper = shallow(<Component {...props} />);

    return {
        props,
        wrapper,
    };
}

beforeAll(() => {
    shallow = createShallow({ dive: true });
});

describe('Components', () => {
    describe('Element', () => {
        it('Should render self', () => {
            const {wrapper, props} = setup();

            console.log(wrapper.debug())

            expect(wrapper.exists()).toBeTruthy();
        });
    });
});