时间戳

首页 > 解决方案 > 在模拟子组件的开玩笑测试中无法读取 null 的属性

reactjs - 在模拟子组件的开玩笑测试中无法读取 null 的属性

问题描述

我有 3 个组件，结构如下：

const Parent = () => {
    // this component uses hooks
    return (
        <div>
            Test
            <Child />
        </div>
    )
}

const Child = () => {
    // this component uses hooks
    return (
        <>
            Other content
            <Child2>
                {stuff}
            </Child2>
        </>
    )
}

const Child2 = () => {
    return <div>{children}</div>
}

在我的测试中，我嘲笑 Child 喜欢：

import * as renderer from "react-test-renderer";

jest.doMock("./Child", () => () => <div>MockChild</div>);

describe("Snapshot", () => {
    it('renders correctly', () => {
        const tree = renderer
                        .create(<Parent />)
                        .toJSON();
        expect(tree).toMatchSnapshot();
    });
})

但是在运行测试时，我收到了这个错误：TypeError: Cannot read property 'children' of null.

在堆栈跟踪之后，我可以看到错误来自childrenChild2。我的问题是，当我在测试中嘲笑 Child 时，为什么开玩笑会安装 Child2？不应该被忽视吗？我该如何解决这个问题？

标签： reactjsjestjs

解决方案

jest.doMock 未吊起

这就是为什么你必须先 doMock 然后分别导入下面的组件。

import * as renderer from "react-test-renderer";

jest.doMock("./Child", () => () => <div>MockChild</div>);

// here is where you should import Parent
import Parent from './Parent';

describe("Snapshot", () => {
    it('renders correctly', () => {
        const tree = renderer
                        .create(<Parent />)
                        .toJSON();
        expect(tree).toMatchSnapshot();
    });
})

顺便说一句，我建议您使用著名的Enzyme而不是react-test-renderer. 它具有 Shallow Rendering，它完全可以满足您开箱即用的需求（模拟每个子组件）。它还提供完整渲染和静态渲染。

推荐阅读