score:6
i just found a solution.
i had to mock router to be a div and contains its children code. this works the following way:
you need the folder __mocks__/react-router-dom.js
which contains the following code:
import react from 'react';
const reactrouterdom = require("react-router-dom")
reactrouterdom.browserrouter = ({children}) => <div>{children}</div>
module.exports = reactrouterdom
now you can use the memoryrouter
to define the path which the route
should point to.
app.test.js:
import react from "react";
import { render } from "@testing-library/react";
import { memoryrouter } from 'react-router-dom';
import app from './app';
describe("unit-test", () => {
it("renders the right component with following path '/impressum'", () => {
const { getbytestid } = render(
<memoryrouter initialentries={['/impressum']}>
<app></app>
</memoryrouter>
)
let impressumpage = getbytestid("impressum-page")
expect(impressumpage).tobeinthedocument()
})
})
also visit the following link, i got the solution from there. https://medium.com/@antonybudianto/react-router-testing-with-jest-and-enzyme-17294fefd303
score:0
i think you need to put exact before the path of the '/' like this
<switch>
<route path="/weatherdetails" component={weatherdetailspage} />
<route path="/addweather" component={addweatherpage} />
<route path="/deleteweather" component={deleteweatherpage} />
<route path="/impressum" component={impressumpage} />
<route exact path="/" component={weatherpage} />
</switch>
like this is mean that only if you have this path="/" the weatherpage show i you add to it like path="/impressum" you will see only impressumpage. hope it help you :)
Source: stackoverflow.com
Related Query
- How to test a component with the <Router> tag inside of it?
- React Router v6 : How to render multiple component inside and outside a div with the same path
- How to unit test the output of a React component method in a React Router / Redux app with Enzyme
- How to link to Routes inside the component rendered by another Route with React Router
- How to test if a component is rendered with the right props when using react-testing-library?
- How to test the state of a functional component in React with Jest (No Enzyme)
- Next.js - How to add a <link> tag inside the <head> with literal onload attribute string value?
- How to 1). put a div , 2). render a component without Route inside <Routes> with React Router in v6 React?
- How to change the specfic component inside an li tag (reactjs);
- How to check the value of a nested React component in a unit test with Enzyme and Jest
- How to pass styles via props with styled components without having to create the component inside the component
- How to test a function inside React functional component using jest.spyOn with React Testing Library
- How to test functional component with async callback inside useEffect using snapshots
- How to unit test a Redux action in a component inside a connected Redux component with Jest
- How to pass data to another component not in the URL with React Router
- How can I avoid unnecessary re rendering of an HOC component, when the parameter component renders in ReactJS with react router
- How can i test with Enzyme+Mocha method call inside Component
- How to test action props from ReactiveDict inside React component with Enzyme
- How to wrap a component with styles inside the MuiThemeProvider tag?
- how test a component inside the _app from NextJS?
- How to test the anchor tag in react class component using jest and enzyme?
- How to test the child component render text after the button on the parent component click with react testing library?
- How to test the style inside the CSS class for React component using Jest and Enzyme?
- How to get all the child elements inside a component in unit test using react and enzyme?
- how to test a component if the component returns empty array in the beginning with react-testing-library?
- How to test the function of a component present inside prop of other component?
- How to test a className with the Jest and React testing library
- How to test style for a React component attribute with Enzyme
- How to fetch the new data in response to React Router change with Redux?
- How to mock history.push with the new React Router Hooks using Jest
More Query from same tag
- ReactJS / NextJS state array not rendering after setState
- I get 404 error in the localhost even though I already did "npm run build"
- Why is unmounting a child component displays an error
- React Material Table action button markup overriding for multiple actions
- How to get invoice fields for mapping in quickbooks?
- onClick does no fire reactJS
- Cant render the array values using .map()
- Cannot display switch in tabs in material-ui
- How to embed components in one another in reactjs?
- React app only displays the background color when deployed to github pages
- Toggle class except if a child is clicked in React
- Optimise canvas drawing of a circle
- Pass data from input field
- Send object in value attribute with react
- Converting React Class Component to a Function Component
- React + Express: Proxy error: Could not proxy request /total from localhstem_errors
- How to get MobX Decorators to work with Create-React-App v2?
- Uncaught TypeError: Cannot read property 'parentNode' of undefined
- How do I return my original list on the 3rd click?
- change style of material-ui checkbox
- How to identify, inside an onClick event handler, which out of many polygons plotted on the same map (using react-leaflet) was clicked?
- How to fix error cannot read property of undefined using react and typescript?
- Best option for i18n with create-react-app (react / router / redux / typescript)
- How to properly type define event.target.value?
- unable to resize SVG element
- ReactJS distinguishing clicks from multiple components.
- Why won't npm start execute?
- How to add multiple lines react native web app
- Tailwind CSS Grid Spacing Messed Up
- Material-UI: The key `caption` provided to the classes prop is not implemented in ForwardRef(TablePagination)