Rotalarımın çalışıp çalışmadığını test etmeye çalışıyorum, varsayılan " / " rotasını test ettiğimde ilk test geçiyor, ancak ikinci test geçmiyor. tek fark, ikinci testte initialEntries={['/register']}
tanıtıldı ve sonuç olarak ikinci test bu nedenle başarısız oldu:
"Oturum(...): Render'dan hiçbir şey iade edilmedi. Bu genellikle bir return deyimi eksik. Veya hiçbir şey işlemek için null döndürün."
Bununla ilgili diğer soruları kontrol ettim ama benim özel problemimle uyuşmuyor gibi görünüyorlar
bu benim uygulamam.tüm rotaları içeren js
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;
Bu benim uygulamam.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();
});
});
Bu Kayıt Defteri.js bileşeni
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;
ve bu, herhangi bir yardım aldığım test başarısızlığı açıklamasıdır, saatlerce buna bakıyorum ve bir çözüm bulamıyor gibi görünüyor.
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)