ReactJs-ReferenceError：未定义提取

Question

在对现有组件进行一些更改之后，我在开玩笑的测试中遇到了麻烦。 基本上，我将对componentDidMount函数的调用添加到在内部执行“提取”的函数，现在在执行笑话测试时遇到错误

fetch在utils / index.ts中被调用，而这一个从MyComponent.tsx中被调用

componentDidMount() {
    this.props.actions.requestLoadA();
    this.props.actions.requestLoadB();

    // Problematic call HERE
    this.getXPTOStatuses("something");  
}

getXPTOStatuses = (something: string) => {
            HttpUtility.get(`/api/getXPTOStatuses?param=${something}`)
                .then(response => handleFetchErrors(response))
                .then(data => {
                    // ....
                })
                .catch(error => {
                    // show the error message to the user -> `Could not load participant statuses. Error: '${error.message}'`                
                });
        }

和get（...）

public static get = (url: string) => fetch(url, { method: "GET", headers: { Accept: "application/json" }, credentials: "same-origin" });

和开玩笑的原因： MyContainer.test.tsx

describe("Risk Import Container Tests", () => {
    let props: MyContainerProps;

    beforeEach(() => {
        props = initialProps;
    });

    it("Matches the snapshot", () => {
        const props = initialProps;        

        const tree = shallow(<MyContainer {...props} />);
        expect(tree).toMatchSnapshot();
    });
});

Answer 1

默认情况下，酶的shallow函数调用componentDidMount。因此，这自然会转到使用fetch的地方。

您有2个选项，以某种方式模拟fetch。

或使用shallow选项disableLifecycleMethods禁用对componentDidMount的呼叫。