내가 노력하고 테스트하는 경우 나선 작업,첫 번째 시험을 통과할 때 나는 테스트를 기본값"/"route,그러나 두 번째 시험을 전달하지 않습니다. 유일한 차이는 두 번째 테스트 initialEntries={['/register']}
가 소개하고,그 결과로 두 번째 시험이 실패하는 이유:
로그인"(...):아무것도 반환에서 렌더링합니다. 이것은 일반적으로 의미 return 문은 없습니다. 거나,를 렌더링하는 것도,null 을 반환합니다."
확인했는데 다른 질문들이 있지만 그들이 일치하지 않 내의 특정 문제
이것은 나 app.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;
이것은 나 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();
});
});
이 Register.js 구성 요소
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;
이 테스트 실패 설명데 어떤 도움이 될 것이 굉장되었습 쳐다보고 이에 대한 시간과 같 솔루션을 찾을 수 있습니다.
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)