Вызывается функция Jest mock. а состояние макета не обновляется?

Question

Я новичок в javascript, реагирую и шучу. Я хотел имитировать функцию, которая будет передана как значение контекста. Я могу передать фиктивную функцию и увидеть, что фиктивная функция запущена, но когда я пытаюсь проверить фиктивную функцию, чтобы подтвердить результаты. Я получаю ошибку, которая прилагается ниже.

Это мой класс для тестирования:

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            authInProgress: true,
            authSuccess: false
        };
    }

    componentDidMount() {
        if (this.context.isAuthenticated) {
            this.setState({
                authInProgress: false,
                authSuccess: true
            });
        } else {
            isUserLoggedIn().then((response) => {
                this.context.logIn();
                this.setState({
                    authInProgress: false,
                    authSuccess: true
                });
            }).catch((err) => {
                console.log(err);
            });
        }
    }

    render() {
        if (this.state.authInProgress) {
            return <div>Rendering login</div>;
        } else if (this.state.authSuccess) {
            return <Redirect to={ROOT}/>;
        }
    }
}

Login.contextType = Context;

export default Login;

это мой тест:

it("When user is logged In, then update the context and redirect to ROOT.", () => {
    const resp = {
        data: {
            responseCode: 600
        }
    };
    isUserLoggedIn.mockResolvedValue(resp);
    const mockLogIn = jest.fn(() => console.log("im hit"));

    act(() => {
        render(
            <MemoryRouter>
                <Context.Provider value={{isAuthenticated: false, logIn: mockLogIn}}>
                    <Login/>
                </Context.Provider>
            </MemoryRouter>
            , container);
    });
    expect(mockLogIn.mock.calls.length).toBe(1);
});

Это результаты теста :

 console.log src/__tests__/auth/components/Login.test.jsx:62
    im hit


Error: expect(received).toBe(expected) // Object.is equality

Expected: 1
Received: 0
<Click to see difference>

Вижу, срабатывает фиктивная функция. но состояние макета не обновляется. что я здесь делаю не так?

Это как-то связано с прицелами? Я попытался вызвать фиктивную функцию вне блока действия, и это состояние обновлено до фиктивного. когда такой же вызов происходит внутри блока, он не работает.

Answer 1

Ну, проблема здесь была в asyn c. Я начал использовать потрясающую библиотеку тестирования-реакции и добавил ожидания для моих тестов. затем все сработало, как и ожидалось.

Теперь мой тест выглядит так:

it("When the user's session is still active (auth tokens are valid), then refresh the tokens and the user is redirected to root.", async () => {
    const resp = {
        data: {
            responseCode: 600
        }
    };
    isUserLoggedIn.mockResolvedValue(resp);
    refreshAuthData.mockImplementation();
    const mockLogin = jest.fn();

    const {history} = renderWithContextAndRouter(
        <Login/>, {
            route: "/login",
            context: {
                isAuthenticated: false,
                logIn: mockLogin
            }
        }
    );
    await waitFor(() => {
        expect(history.location.pathname).toBe("/");
        expect(mockLogin.mock.calls.length).toBe(1);
    });
});

renderWithContextAndRouter - это HO C, который вводит мой контекст и маршруты. и мой настоящий тест даже не имеет этой проверки, так как это просто детали реализации. это просто, чтобы помочь некоторым новичкам :)