Output Output for the Adedxetercxitsheewreil:l- be :-
Learning Outcome After Performing AddttheixstEhxeererc:-ise You’ll be able to Write to Program of Adding React Router in application.
App Deployment
Problem Statement What will you do? Write a Program of React Using Lazy Loading method .
Solution What will be the steps steps to get the output? • Step-1 : import library react files • Step-2: Add of constant function • Step-3: Then add the Lazy Loading method • Step-4: RUN the code.
Code import React, { Suspense, lazy } from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react -router-dom'; const About = lazy(() => import('./About')); const App = () => ( <Router> <Suspense fallback={<div>Loading...</div>}> <Switch> <Route path=\"/about\" component={About} /> <Route path=\"/\" exact render={() => ( <div> <h1>The Main Page!</h1> <a href=\"/about\">Click here</a> </div> )} /> </Switch> </Suspense> </Router> ); export default App;
Output Output for the Adedxetercxitsheewreil:l- be :-
Learning Outcome After Performing AddttheixstEhxeererc:-ise You’ll be able to Write to Program on React using Lazy Loading method.
Testing React App
Problem Statement What will you do? Write a Program to test a basic small application, where your primary focus is to test an asynchronous method which fetches content for an index component, and shows a loading message when it is loading.
Solution What will be the steps steps to get the output? • Step-1: Mock the API call using jest.mock • Step-2: Render the component and test that we see the message when the component is loading • Step-3: Make sure our async method gets called correctly • Step-4: Return some data from the method that fetches the content and verify that it appears in the DOM
Code import React from \"react\"; import { render, screen, wait } from \"@testing-library/react\"; // highlight-line import Index from \"./Index\"; import \"jest-dom/extend-expect\"; import { fetchContent } from \"./api/indexContent\"; jest.mock(\"./api/indexContent\"); test(\"We show our Index\", async () => { const indexContent = [{ id: 1, title: \"My index\", url: \"/1\" }]; fetchContent.mockResolvedValueOnce(indexContent);
Code render(<Index />); expect(screen.getByText(\"Loading...\")).toBeInTheDocument(); expect(fetchContent).toHaveBeenCalledTimes(1); expect(fetchContent).toHaveBeenCalledWith(); await wait(() => expect(screen.getByText(\"My index\")).toBeInTheDocument()); indexContent.forEach((Content) => expect(screen.getByText(Content.title)).toBeInTheDocument() ); });
Output Output for the Adedxetercxitsheewreil:l- be :- Using mockResolvedValueOnce, we are returning some fake values. Our next step is to wait for the async method to resolve and for Index to redraw. While checking that the title has been rendered, we use the wait method. Once that is done, we go post-by-post to ensure the title is present.
Learning Outcome After Performing AddttheixstEhxeererc:-ise You will be able to test asynchronous methods.
Happy Learning!
Search
