javascript - enzyme 安装 API 问题 : TypeError: Cannot read property 'find' of undefined

Question

我正在尝试测试我的组件，但我不断收到此错误: 类型错误:无法读取未定义的属性“查找”

在将我的组件变成无状态组件之前，我的测试工作正常。据我了解，您也可以测试功能性无状态组件。我看不出我在这里做错了什么。

我的测试文件

import * as React from 'react';
import { LeftNavigation } from "../src/components/LeftNavigation";
import { mount } from 'enzyme';

describe("<LeftNavigation />", () => {
    const wrapper;

    beforeEach(() => {
        wrapper = mount(
            <LeftNavigation title="Protocol Vantage Points" path="/hello"/>
        );
    });

    it("renders the title", () => {
        expect(wrapper.find(".uk-h3 span").text()).toBe("Protocol Vantage Points");
    });

    it("renders first menu item 'On demand tests'", () => {
        expect(wrapper.find("#synth-left-nav .uk-nav li a").at(0).text()).toBe("On demand tests");
    });

    it("renders second menu item 'Feel status'", () => {
        expect(wrapper.find("#synth-left-nav .uk-nav li a").at(1).text()).toBe("Fleet status");
    });
});

我的组件

import * as React from "react";
import { NavLink, Link } from 'react-router-dom';

export interface LeftNavigationProps {
    title: string;
    path: string;
}

export class LeftNavigationItem {
    title: string;
    path: string;

    constructor(title: string, path: string) {
        this.title = title;
        this.path = path;
    }
}

export const LeftNavigation: React.StatelessComponent<LeftNavigationProps> = (props: LeftNavigationProps) => {

    const items: Array<LeftNavigationItem> = [
        new LeftNavigationItem('On demand tests', '/ondemandtests'),
        new LeftNavigationItem('Fleet status', '/fleetstatus')
    ];

    return (
        <div id="synth-left-nav" className="uk-margin-bottom">
            <h1 className="uk-h3">
                <span><Link id="synth-left-nav-title" to={props.path}>{props.title}</Link></span>
            </h1>
            <hr className="uk-width-1-1" />
            <ul className="uk-nav uk-margin-remove"> {
                items.map(function (m, index) {
                    return (
                        <li key={m.path}>
                            <NavLink activeClassName="uk-text-bold uk-active"
                                        to={props.path + m.path} replace>{m.title}</NavLink>
                        </li>
                    );
                })
            }
            </ul>
        </div>
    );
};

Answer 1

我发现了问题。测试呈现 <Link> 的组件或 <Route> ，可能会导致有关上下文的错误和警告。建议将测试包装在 <StaticRouter> 中或 <MemoryRouter> .查看此以供引用:https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/testing.md

这是我的解决方案:

import * as React from 'react';
import { LeftNavigation } from "../src/components/LeftNavigation";
import { mount } from 'enzyme';
import { MemoryRouter } from 'react-router-dom'

describe("<LeftNavigation />", () => {
    const wrapper;
    // Testing components that renders a <Link> or a <Route>, may cause 
    // errors and warnings about context. It is recommended to wrap your
    // tests in a <StaticRouter> or <MemoryRouter>

    beforeEach(() => {
        wrapper = mount(
            <MemoryRouter><LeftNavigation title="Protocol Vantage Points" path="/hello"/></MemoryRouter>
        );
    });

    it("renders the title", () => {
        expect(wrapper.find(".uk-h3 span").text()).toBe("Protocol Vantage Points");
    });

    it("renders first menu item 'On demand tests'", () => {
        expect(wrapper.find("#synth-left-nav .uk-nav li a").at(0).text()).toEqual("On demand tests");
    });

    it("renders second menu item 'Feel status'", () => {
        expect(wrapper.find("#synth-left-nav .uk-nav li a").at(1).text()).toBe("Fleet status");
    });
});