Question

我正在测试一个包装器组件，该组件使用子代道具渲染其子代。问题是在测试文件中，当我设置包装器时，它运行良好。但是，当我在组件中克隆儿童道具时，出现以下错误：

Invariant Violation: Element type is invalid: expected a string (for 
built-in components) or a class/function (for composite components) but 
got: undefined. You likely forgot to export your component from the 
file it's defined in, or you might have mixed up default and named imports.

仅当使用mount而不是浅表时才会发生这种情况，我希望它可以与mount一起使用。

class Parent extends React.Component {
    render() {
       const { someProps, someOtherProps, anotherProp } = this.props;

        return (
            <ParentWrapper someInfo={someProps} >
                <One someOtherProps={someOtherProps} />
                <Two  anotherProp={anotherProp} />
            </ParentWrapper>
        );
    }
}

ParentWrapper：

class ParentWrapper extends React.Component {
    render() {
        const {children, somethin} = this.props;
        const clonedChildren = React.cloneElement(children, R.merge(children.props, { somethin }));

        return (
            <div>
                {clonedChildren}
            </div>
        );
    }
}

测试文件：

 const Parent = require('parent');
 panel = mount(<Parent {...defaultProps} />);

Answer 1

我也遇到过这种情况。关于 SO 的大多数其他类似答案都是指正确的导入/导出，但当我使用 shallow() 时它工作正常，这意味着它不是导入/导出。

最终我发现 react 和 react-dom 的版本略有不匹配。（提醒，因为我需要它，删除现有的 node_modules 和 package-lock.json 以确保您确实在拉更新模块）。这为我修好了。

不变违规：元素类型无效：使用酶标仪测试时，预期为字符串（对于内置组件）

1 个答案: