Question

我有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>
}

在我的测试中，我在嘲笑像这样的孩子

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。

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

Answer 1

jest.doMock is not hoisted

这就是为什么您必须先执行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（浅层渲染）功能，可以完全满足您的需求（模拟每个子组件）。它还提供了完全渲染和静态渲染。

无法在嘲笑子组件的玩笑测试中读取null属性

1 个答案: