编写集成测试以检查应用程序的路由是否正确运行

Question

我目前正在尝试编写一个集成测试，以检查我的应用程序是否正常运行。

我现在最大的问题是尝试使MainTemplate容器呈现的组件根据实际环境中的变化进行更改。基本上，我想做的是获取MainTemplate来呈现HomePage组件，这是我设法完成的，然后单击HomePage组件中的Link元素后更改为另一个Route。 这应该导致呈现DictionaryRooms组件。

结果不是我期望的那样，即使在模拟“单击”之后，Jest快照仍会呈现HomePage。任何想法都将受到欢迎。预先感谢

const wrapper = mount(
    <Root>
        <MemoryRouter initialEntries={['/']} initialIndex={0}>
            <MainTemplate>
                <Route
                    path="/dictionaries"
                    render={() => (
                        <MainTemplateContent
                            title="Dictionaries"
                        >
                            <Route path="/dictionaries/rooms" component={DictionaryRooms} />
                        </MainTemplateContent>
                    )}
                />
                <Route
                    exact
                    path="/"
                    render={() => (
                        <MainTemplateContent title="">
                            <HomePage />
                        </MainTemplateContent>
                    )}
                />
            </MainTemplate>
        </MemoryRouter>
    </Root>
);



it("renders HomePage", () => {
    expect(wrapper.find(HomePage).length).toEqual(1);
});

it("link to dictionaries exists", () => {
    expect(wrapper.find("[href='/dictionaries']").length).toEqual(1);
});

it("clicking on link to dictionaries renders ", () => {
    wrapper
        .find("[href='/dictionaries']")
        .simulate('click');
    expect(wrapper).toMatchSnapshot();
})