我正在尝试检查此组件中的回退导航:
class BackMore extends Component {
render() {
return (
<div className="backMore">
<div className="back" onClick={ this.props.history.goBack } data-testid="go-back">
<FontAwesomeIcon icon={faArrowLeft} />
</div>
<span className="title">{ this.props.title }</span>
<More/>
</div>)
}
}
export default withRouter(BackMore)
我使用页面https://testing-library.com/docs/example-react-routertesting-library
中的配方
// test utils file
function renderWithRouter(
ui,
{
route = '/',
history = createMemoryHistory({ initialEntries: [route] }),
} = {}
) {
const Wrapper = ({ children }) => (
<Router history={history}>{children}</Router>
)
return {
...render(ui, { wrapper: Wrapper }),
// adding `history` to the returned utilities to allow us
// to reference it in our tests (just try to avoid using
// this to test implementation details).
history,
}
}
这是我的测试:
test('Go back in the history', () =>{
const browserHistory = createMemoryHistory()
browserHistory.push('/my-learning');
const { history } = RenderWithRouter(<BackMore />, { route: ['my-learning'], history: browserHistory });
userEvent.click(screen.getByTestId(/go-back/i));
expect(history.location.pathname).toBe('/')
})
变量是“我的history.location.pathname
学习”,它应该是“/”
有什么问题?