reactjs - 酶单元测试返回在组件上运行测试时

Question

我有一个像这样的非常简单的测试

describe("In the global filter component ", () => {
    let wrapper;

    beforeEach(() => {
        wrapper = shallow(    
            <div data-test="Foo">
                <p>Stuff here</p>
            </div>,
        );
    });

    it("renders without error", () => {
        const component = findByTestAttr(wrapper, "Foo");
        console.log(wrapper.debug());
        expect(component.length).toBe(1);
    });
});

我使用一个简单的自定义“ findByTestAttr ”通过属性而不是类/ID 来查找 DOM 元素——这个测试通过就好了，运行测试时控制台日志就是这个

console.log
    <div data-test="Foo">
        <p>
            Stuff here
        </p>
    </div>

我不想在测试中在这里写代码 - 我想测试一个组件，所以我将测试更新到这个

    beforeEach(() => {
        wrapper = shallow(    
            <TestComponent></TestComponent>,
        );
    });

这个组件只是一个简单的组件，其标记与原始测试完全相同，但现在我的测试失败了，我的控制台日志如下所示

console.log
    <Route>
        [function children]
    </Route>

所以测试失败了，因为它现在才找到这个元素 - 如果有人能在这里指出我正确的方向，指向一些关于如何前进的文档，我将非常感激！

标签： reactjsunit-testingtestingjestjsenzyme