Блог

Я провожу тест, который проверяет перенаправление, когда пользователь не аутентифицирован, то есть, если пользователь не аутентифицирован, то Домашняя страница должна перенаправляться на страницу входа. Тем не менее, он не проходит, но на самом деле он работает хорошо (мне пришлось сломать TDD, чтобы понять это), поэтому я подозреваю, что в тесте возникла проблема с компонентом маршрутизатора.

Home.js

 import { useEffect, useState } from "react"; import { createTheme, ThemeProvider } from "@mui/material/styles"; import { CssBaseline } from "@mui/material"; import { connect } from "react-redux"; import { useNavigate } from "react-router-dom";  const theme = createTheme({  palette: {  background: {  default: "#1f2641",  },  text: {  primary: "#d0d0d0",  },  }, });  function Home({ username, isAuthenticated }) {  const [user, setUser] = useState("");  const navigate = useNavigate();   useEffect(() =gt; {  if (username) {  setUser(username);  }  }, [username]);   useEffect(() =gt; {  if (!isAuthenticated) {  navigate("/login", { replace: true });  }  }, [isAuthenticated, navigate])   return (  lt;ThemeProvider theme={theme}gt;  lt;CssBaseline /gt;  lt;h1gt;{`Welcome to Home Page, ${user}`}lt;/h1gt;  lt;/ThemeProvidergt;  ); }  const mapStateToProps = (state) =gt; ({  username: state.user.username,  isAuthenticated: state.user.isAuthenticated, });  export default connect(mapStateToProps)(Home);  

Home.test.js

 import { render, screen } from "@testing-library/react"; import { Provider } from "react-redux"; import { createStore, applyMiddleware } from "redux"; import { MemoryRouter } from "react-router"; import thunk from "redux-thunk";  import rootReducer from "../reducers"; import Home from "./Home";  const createTestStore = (initialState = {}) =gt; {  const store = createStore(  rootReducer,  initialState,  applyMiddleware(...[thunk])  );  return store; };  // User is logged const userLogged = {  user: {  token: "my_token",  username: "my_username",  isAuthenticated: true,  isLoading: false,  errors: null,  }, };  const userIsNotLogged = {  user: {  token: null,  username: null,  isAuthenticated: false,  isLoading: false,  errors: null,  }, };  let store; describe("Depends if user is authenticated or not, Home must to redirect to Login Page", () =gt; {   // working  test("must to show an home page message if user is authenticated", () =gt; {  store = createTestStore(userLogged);  render(  lt;MemoryRoutergt;  lt;Provider store={store}gt;  lt;Home /gt;  lt;/Providergt;  lt;/MemoryRoutergt;  );   const home = screen.getByText(/my_username/i);  expect(home).toBeInTheDocument();  });     // fail, isAuthenticated is false so must redirect to Login   test("must to show login page if user is not logged", async () =gt; {  store = createTestStore(userIsNotLogged);   render(  lt;MemoryRoutergt;  lt;Provider store={store}gt;  lt;Home /gt;  lt;/Providergt;  lt;/MemoryRoutergt;  );   const userInLogin = await screen.findByText(/nombre de usuario/i);   expect(userInLogin).toBeInTheDocument();  }); });  

Error message

 Depends if user is authenticated or not, Home must to redirect to Login Page › must to show login page if user is not logged   Unable to find an element with the text: /nombre de usuario/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.   lt;bodygt;  lt;divgt;  lt;divgt;  lt;h1gt;  Welcome to Home Page,   lt;/h1gt;  lt;/divgt;  lt;/divgt;  lt;/bodygt;   65 | );  66 |  gt; 67 | const userInLogin = await screen.findByText(/nombre de usuario/i);  | ^  68 |  69 | expect(userInLogin).toBeInTheDocument();  70 | });   at waitForWrapper (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/wait-for.js:173:27)  at findByText (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:101:33)  at Object.lt;anonymousgt; (src/pages/Home.test.js:67:38)  

in Login Page there is a input with text «nombre de usuario»

Dependencies

 "dependencies": {  "@emotion/react": "^11.6.0",  "@emotion/styled": "^11.6.0",  "@mui/material": "^5.1.0",  "@testing-library/jest-dom": "^5.15.0",  "@testing-library/react": "^11.2.7",  "@testing-library/user-event": "^12.8.3",  "axios": "^0.24.0",  "react": "^17.0.2",  "react-dom": "^17.0.2",  "react-redux": "^7.2.6",  "react-router-dom": "^6.0.2",  "react-scripts": "4.0.3",  "redux-thunk": "^2.4.0",  "redux-thunks": "^1.0.0",  "web-vitals": "^1.1.2"  },  

Я неправильно предоставляю маршрутизатор? Спасибо!