Estoy tratando de probar si mis rutas son de trabajo, la primera prueba que pasa cuando me pruebe el defecto "/" de la ruta, sin embargo, la segunda prueba no pasa. la única diferencia es que en la segunda prueba de la initialEntries={['/register']}
se introduce, y como resultado de la segunda prueba falla por esta razón:
"Inicio de sesión(...): Nada fue devuelto de render. Esto generalmente significa que una instrucción return es la que falta. O, para no representar nada, se devuelve null."
He comprobado la otra pregunta con respecto a esto, pero ellos no parecen coincidir con mi problema en particular
este es mi app.js que contiene todas las rutas
import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'
import PrivateRoute from './components/PrivateRoute';
import Login from './components/LoginRegister/Login';
import Dashboard from './components/Dashboard/Dashboard';
import Register from './components/LoginRegister/Register';
import PageNotFound from './components/Pages/PageNotFound';
import Header from './components/LoginRegister/Header';
function App() {
return (
<Router>
<div className="main-container">
<div className="Route-container">
<Header/>
<Switch>
<PrivateRoute exact path = '/dashboard' component = {Dashboard}></PrivateRoute>
<Route exact path = '/' component = {Login} />
<Route exact path = '/test' component = {Dashboard} />
<Route exact path = '/register' component = {Register} />
<Route component = {PageNotFound} />
</Switch>
</div>
</div>
</Router>
);
}
export default App;
Este es mi App.test.js
import React from 'react'
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router';
import App from "./App";
import Dashboard from './components/Dashboard/Dashboard';
import Header from './components/LoginRegister/Header';
import Login from './components/LoginRegister/Login';
import Register from './components/LoginRegister/Register';
import PageNotFound from './components/Pages/PageNotFound';
import '@testing-library/jest-dom/extend-expect';
jest.mock('./components/Dashboard/Dashboard');
jest.mock('./components/LoginRegister/Login');
jest.mock('./components/LoginRegister/Register');
jest.mock('./components/Pages/PageNotFound');
jest.mock('./components/LoginRegister/Header');
describe("App component", () =>{
it("renders page header and login component on default route", ()=>{
Header.mockImplementation(()=> <div>HeaderMock</div>);
Login.mockImplementation(()=> <div>LoginMock</div>);
render(
<MemoryRouter>
<App />
</MemoryRouter>
);
expect(screen.getByText("HeaderMock")).toBeInTheDocument();
expect(screen.getByText("LoginMock")).toBeInTheDocument();
});
it("Renders page header and Register component on Register route", ()=>{
Header.mockImplementation(()=> <div>HeaderMock</div>);
Register.mockImplementation(()=> <div>RegisterMock</div>);
render(
<MemoryRouter initialEntries={['/register']}>
<App />
</MemoryRouter>
);
expect(screen.getByText("HeaderMock")).toBeInTheDocument();
expect(screen.getByText("RegisterMock")).toBeInTheDocument();
});
});
Este es el Register.js componente
import React from 'react'
import { useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
const initialState = {
credentials: {
name: '',
username: '',
password: ''
}
}
function Register() {
const [state, setState] = useState(initialState)
const history = useHistory()
function goToLogin () {
history.push('/')
}
function handleChange(e) {
setState({
credentials: {
...state.credentials,
[e.target.name]: e.target.value
}
})
}
return (
<div className = "main-container">
<div className = "middle-section">
<div className= "login-section">
<div className = "selection login-flex-item">
Already a member?
<Link to ='/' className = 'select-logreg'>Login</Link>
</div>
<form className = 'login-flex-item' onSubmit = {goToLogin}>
<input className = 'form-item'
type = 'text'
name = 'name'
placeholder = "Enter Name"
value = {state.credentials.name}
onChange ={handleChange}
/>
<input className = 'form-item'
type = 'text'
name = 'username'
placeholder = "Username"
value = {state.credentials.username}
onChange ={handleChange}
/>
<input className = 'form-item'
type="password"
name="password"
placeholder = "Password"
value={state.credentials.password}
onChange={handleChange}
/>
<button className = 'form-item btn'>Sign Up</button>
</form>
</div>
</div>
</div>
);
};
export default Register;
y esta es la prueba de errores descripción de me estoy haciendo cualquier ayuda sería impresionante que he estado mirando esto durante horas y no parecen encontrar una solución.
FAIL src/App.test.js
App component
√ renders page header and login component on default route (33 ms)
× Renders page header and Register component on Register route (198 ms)
● App component › Renders page header and Register component on Register route
Login(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
35 | Register.mockImplementation(()=> <div>RegisterMock</div>);
36 |
> 37 | render(
| ^
38 | <MemoryRouter initialEntries={['/register']}>
39 | <App />
40 | </MemoryRouter>
at reconcileChildFibers (node_modules/react-dom/cjs/react-dom.development.js:14169:23)
at reconcileChildren (node_modules/react-dom/cjs/react-dom.development.js:16990:28)
at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17890:5)
at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)
at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23964:7)
at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22779:12)
at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22707:5)
at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:22670:7)
at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:22293:18)
at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21881:7)
at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:25482:3)
at node_modules/react-dom/cjs/react-dom.development.js:26021:7
at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:22431:12)
at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:26020:5)
at Object.render (node_modules/react-dom/cjs/react-dom.development.js:26103:10)
at node_modules/@testing-library/react/dist/pure.js:101:25
at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:22380:12)
at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
at render (node_modules/@testing-library/react/dist/pure.js:97:26)
at Object.<anonymous> (src/App.test.js:37:7)