window.getComputedStyles() doesn't work with Jest and React - javascript

I am trying to run basic assertions about the styling of my component. Right now I am running them on the default React app that the CRA template gives you:
App.js
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
App.test.js
test("computed styles", () => {
render(<App />);
const app = document.querySelector(".App");
const appStyles = window.getComputedStyle(app);
console.log(appStyles.width);
});
Nothing is logged to the console. I run the same code in the browser, and in the app itself, and it returns 1440px, the width of my screen. But in Jest, it returns nothing.

Related

How to adjust the sidebar size in React

I am new to react, and I am working on my first project, following https://www.youtube.com/watch?v=qwM23_kF4v4.
At the very beginning, I followed all the steps and tries to set a sidebar on the left with "240px", the expected is as left, but what I made is as right.
The code is below. I only add the sidemenu part.
I have rechecked the code in the video many times, but it still shows as below. Furthermore, I expected the sidebar to be 50% of the screen, as shown in the video.
I have changed the sidemenu width as "100%", "40vmin", but nothing works.
What I have tried is as follows in App.css:
.sidemenu {
width: 1000px;
border:1px solid white;
}
My App.js code is as follows:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<aside className="sidemenua">
<h1>Aside</h1>
</aside>
<section>
</section>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Expected layout
My layout

please check your className is differ from css selector name it should be
sidemenu.
<aside className="sidemenu">
<h1>Aside</h1>
</aside>

useHistory() function doesn't render the path provided

I am working on a ott clone project. I want to render a page(profile page) when a user is login and click ont the profile avatar. I used useHistory() from react-router-dom and it doesn't render the profile screen page.
Code;
ProfileScreen;
import React from 'react'
import "./ProfileScreen.css"
function ProfileScreen() {
return (
<div className='ProfileScreen'>
<h1>Hey Yoo</h1>
</div>
)
}
export default ProfileScreen;`
Avatar code
import { useHistory} from 'react-router-dom';
const history = useHistory()
return (
<div className= { `nav ${show && 'nav_black'}`}>
<div className="nav_contents">
<img className='nav_logo' src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="" />
<img onClick={() => history.push("/profile")} className='nav_avatar' src="https://ih0.redbubble.net/image.618369215.1083/flat,1000x1000,075,f.u2.jpg" alt="" />
</div>
</div>
);
react router dom version 8.19.2
I don't know what's wrong in the code, it doesn't work.

Want to return an image everytime the function is run but it keeps giving me an error. What's wrong here?

import logo from './logo.svg';
import './App.css';
import img1 from './images/download.png'
> function image( ){
> return (
> <img src={(img1)}/>
> )
> }
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
Welcome to your first website!
</p>
<Link value='Learn React!'/>
<Link value='Another link!'/>
</header>
image();
</div>
);
}
I've tried different ways of importing the image but none of them seem to not give me errors. I'm still a beginner and just need to find a resolve to this. I apologize if this is a simple question

Your function needs to be in brackets:
...
</header>
{image()}
...
You can also just put the image url/path in the element.
src="./images/download.png"
or if you're looking for it to be more dynamic, assign the url/path to a variable and pass it into your function. OR just include the img element in your return html.
function image(src){
return (
<img src={src}/>
)
}
OR
...
</header>
<img src="./images/download.png" />
</div>
You can also, while assigning it to a variable, keep it dynamic by passing in the source down to the return html:
...
const src = './images/download.png'
return (
...
</header>
<img src={src} />
</div>
...
Could you explain further what errors you are getting?

how can I add locked page before loading dashboard?

I am trying to build a locked page to display a message when users visit the web app from mobile and load a mobile page layout when a message like this mobile is not supported . I was thinking on using document.addEventListener('DOMContentLoaded', () => { , but not sure . if it's the best , but however where can I load this validation? the logic pseudo will be something to the following
if (tooSmall || isMobile) {
ReactDOM.render(<MobileLockout />);
} else {
ReactDOM.render(<Root/>);
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
app.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;

You add can a Wrapper (HoC) to your App (in index.js)
ReactDOM.render(
<React.StrictMode>
<MobileWrapper>
<App />
<MobileWrapper>
</React.StrictMode>,
document.getElementById('root')
);
The MobileWrapper should handle which to show the children props or "MobileLockout" component
function MobileWrapper({ children }}) {
const isMobile = ..
if (isMobile) return <MobileLocout />
return children
}

If check in App.js it is work
import logo from './logo.svg';
import './App.css';
function App() {
if (tooSmall || isMobile) {
return (
<MobileLocout />
)
} else {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;

This is an error i have been encountering for a while now "Module not found: Can't resolve '../lib'", no idea what the problem is

import logo from "./logo.svg";
import "./App.css";
import { FiAirplay } from "react-icons/all";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer">
Learn React
</a>
</header>
</div>
);
}
export default App;
error: Failed to compile.
./node_modules/react-icons/ai/index.esm.js
Module not found: Can't resolve '../lib'
please what am i doing wrong?,

well your import statement is wrong..must be vs code autocomplete feature as i always get this.
import { FiAirplay } from "react-icons/fi";

Categories

Resources