相关疑难解决方法(0)

我刚开始学习React并且遇到了这个错误.

未捕获的TypeError:无法在新路由器上读取未定义的属性"pathname"

这是我的代码:

var React = require('react');
var ReactDOM = require('react-dom');
var { Route, Router, IndexRoute } = require('react-router');
var hashHistory = require('react-router-redux')

var Main = require('./components/Main');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main}>

        </Route>
    </Router>,
  document.getElementById('app')
);

我以下的教程使用React-Router 2.0.0,但在我的桌面上我使用的是4.1.1.我尝试搜索更改,但未能找到有效的解决方案.

"dependencies": {
"express": "^4.15.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8"

我是玩笑测试的新手，我想测试以下代码。

import React from "react";\nimport "./ButtonLogin.css";\nimport { Link } from 'react-router-dom';\n\nfunction ButtonLogin() {\n    return (\n        <Link to="/login"> <button className="button-login">Iniciar sesi\xc3\xb3n</button></Link>\n    )\n}\n\nexport default ButtonLogin;\n

import { MemoryRouter } from 'react-router-dom';\nimport { render, fireEvent, Link } from '@testing-library/react';\nimport { ButtonLogin } from './ButtonLogin';\n\nit('routes to a new route', async () => {\n\n  ButtonLogin = jest.fn();\n\n  const { getByText } = render(\n    <MemoryRouter ButtonLogin={ButtonLogin}>\n      <Link to="/login">Iniciar sesi\xc3\xb3n</Link>\n    </MemoryRouter>\n  );\n\n  fireEvent.click(getByText('Iniciar sesi\xc3\xb3n'));\n\n  expect(ButtonLogin).toHaveBeenCalledWith('/login');\n});\n

我已经执行了以下测试，但失败了，并且在第 9 行中收到以下错误。\n路由到新路由

"ButtonLogin" is read-only.\n

我正在我的一个项目中使用react-testing-library，并尝试编写验证应用内路由的测试。

例如，测试 AccessDenied 页面上的按钮是否会将您带回主页。

我已经能够为我的应用程序组件成功编写这些类型的测试，因为它定义了所有应用程序路由。但是，如果 AccessDenied是这些路由之一，我需要如何设置测试来验证单击那里的按钮是否会将我路由回主页？

这是一个人为的例子：

应用程序.tsx

<>
  <Router>
    <Route exact path="/" component={Home} />
    <Route exact path="/access-denied" component={AccessDenied} />
  </Router>
  <Footer />
</>

拒绝访问.tsx

<div>
  <div>Access Denied</div>
  <p>You don't have permission to view the requested page</p>
  <Link to="/">
    <button>Go Home</button>    <--- this is what i want tested
  </Link>
</div>

正如我之前所说，我的测试在内部工作的原因App.test.tsx是因为我的应用程序组件定义了其内部的路由，而我的AccessDenied只是其中之一。App.tsx但是，是否可以在我的测试中利用我定义的路由器AccessDenied.test.tsx？也许我处理这个问题的方式不正确？这就是我挣扎的地方。作为参考，这是我的工作App.test.tsx测试。

应用程序.test.tsx

describe('App', () => {
  it('should allow you to navigate to login', async () => {
    const …