Reactjs 在React组件中测试导航

我想测试一下，当按下提交按钮时，url是否会改变。作为测试的一部分，我检查初始url是否为“/auth”，url是否为“/”

不过，对于初始url测试，一个更简单的测试失败了

测试：

---

经过更多的尝试和错误，我想出了一些办法。“/”是初始url，但我不知道如何更改它。我正在传递组件将导航到的url，并在开始时断言“/”是url，并且在测试导航时，我断言url已更改为传入的url

我也使用路由器而不是内存路由器。从中我有一种预感，即传递到组件中的历史道具（带有“withRouter”）会以一种可以测试的方式进行更改

在所有测试之前：

beforeEach(() => {
    jest.resetAllMocks();
    createPermanentAuthSpy = jest.spyOn(yasClient, "createPermanentAuth");

    history = createMemoryHistory();
    
    const root = document.createElement('div');
    document.body.appendChild(root);
    render(
        <Router history={history}>
            <TokenEntryWithRouter navigateToOnAuthentication="/dummy" />
        </Router>,
        root
    );

    token = screen.getByLabelText('Auth code:');
    expect(screen.queryByTestId('bad-code-message').classList.contains('hidden')).toBe(true);
    expect(history.location.pathname).toBe("/");
});

---

MemoryRouter不应该影响location.pathname，这就是它的用途。

import React from "react";
import { Route } from "react-router-dom";
import { ProtectedRoute } from './ProtectedRoute';
import { CreateProfileWithRouter } from './CreateProfileComponent';
import { ActivityList } from './ActivityListComponent';
import { TokenEntryWithRouter } from './TokenEntryComponent';

export class App extends React.Component {
    render() {
        return (
            <div>
                <ProtectedRoute exact path="/" component={ActivityList} />
                <Route path="/login" component={CreateProfileWithRouter} />
                <Route path="/auth" component={TokenEntryWithRouter} />
            </div>
        );
    }
}

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

    Expected: "/auth"
    Received: "/"

beforeEach(() => {
    jest.resetAllMocks();
    createPermanentAuthSpy = jest.spyOn(yasClient, "createPermanentAuth");

    history = createMemoryHistory();
    
    const root = document.createElement('div');
    document.body.appendChild(root);
    render(
        <Router history={history}>
            <TokenEntryWithRouter navigateToOnAuthentication="/dummy" />
        </Router>,
        root
    );

    token = screen.getByLabelText('Auth code:');
    expect(screen.queryByTestId('bad-code-message').classList.contains('hidden')).toBe(true);
    expect(history.location.pathname).toBe("/");
});

it("navigates to '/', when a good token is entered.", async() => {
    createPermanentAuthSpy.mockImplementationOnce(() => Promise.resolve(true));
    await act(async() => {
        fireEvent.change(token, {  target: { value: '1' } });
        fireEvent.submit(screen.getByTestId('create-permanent-auth'));
    });

    expect(createPermanentAuthSpy).toHaveBeenCalledTimes(1);
    expect(token.classList.contains('valid-data')).toBe(true);
    expect(screen.queryByTestId('bad-code-message').classList.contains('hidden')).toBe(true);
    expect(history.location.pathname).toBe("/dummy");
});