How to import file from general path in cypress? - javascript

I have a file called 'contents' in cypress.
in my test file I want to import this file.
I do the following :
import contents from 'C:/Users/asus/cypress/support/contents';
But I want to make it more general path (not contain my own path).
I tried to import it inside the index file in cypress.
As follow:
import './contents'
But it is not working by this way. Cypress will throw an error that contents is not defined.

Not knowing the data type and assuming that the exact location of the file doesn't matter, I would recommend moving the file to the /fixtures folder and importing it as recommended in the Cypress docs here. So you can use a relative path for the import in your test like:
import contents from '../fixtures/contents';
You can also find an example for importing a JSON file in this answer.

First, you have to export that file
const contents = {
// Your data
}
export { contents };
You can import files like this way
import { contents } from '../support/contents.js'
If ../support/contents.js is not working Please use ../../ to get the root directory of your system like ../../support/contents.js.
Please replace your file extension with .js.

Related

Import a single export seems to import the whole js file. How can I import just the exported object?

Exporting from one file index.js like this: export const categoriesObj = new Object(); and trying to import from another index.js file like this: import { categoriesObj } from "../app/index.js";, but I get an Uncaught ReferenceError: (variable from the other file) is not defined because instead of just importing the categoriesObj, I think is importing the whole file.
Currently I'm using webpack and babel. Both index.js files have separate bundle files. The folder structure looks like this:
dist
bundle1.js
bundle2.js
src
app
index.js
history
index.js
What I have tried is:
Add "type": "module" in package.json file.
Added babel-loader. Thought it was some problem with ES6 modules.
renamed ../app/index.js to index.mjs.
What I'm trying to do is to import an object which is generated in another file so I can use it on this other file.
Hope this makes sense. I've been stuck in this for days. Thanks for reading!

Importing files from different folders in React.js - Relative Path

I am learning React.js, I struggle with relative paths...
Structure of the project,
-Project
-node_modules
-public
-index.html
-src
-p1
-test.json
-give.js
-loan.png
I like to import test.json file in give.js file, How to achieve this,
I tried this format - import test from "./p1/test.json" but it shows error - Module not found
And, I have a doubt, saving media files in public folder is safe or not?, Any hint would be very help full
Thanks
I believe that one way to solve this is to use require.
const test = require("./p1/test.json");
An alternate approach could be changing your JSON file to a js file, and exporting an object.
in p1/test.js
const test = { your JSON };
export default test;
There is nothing wrong with your import statement, you are doing it just fine. The problem is probably with the file type.
You are trying to import a JSON file. Which will not work out of the box with react.
To fix this, convert your .json file to a .js with the structure like so:
test.js
export default { foo: 'bar' }
give.js
import test from "./p1/test"
The relative path you've mentioned is correct.
Rather than using the file type of .json, use .js file extension.
And also make sure that you're exporting the data from your test.js file correctly. For eg.
test.js
export default const test = {
"test": 1
}
give.js
import test from './p1/test'
Saving media files in the public folder is acceptable but we save them in the src folder so that the build system can cache them, which leads to improvement in the performance of the app.

how to call a component into anther in reactjs

I cannot import mystyle.css file stylesheet.css in react kindly anyone tell me to set the path in react
I want to call myStyles.css file into main stylesheet.js using this
import mystyles from '../components/myStyles.css'
but I received an error form the browser like this
./src/components/Stylesheet.js
Module not found: Can't resolve './src/components/myStyles.css' in 'E:\ReactJS\my-app\src\components'
can anybody tell me how to include this file into my Stylesheet.js file
try: ../ instead of ./
or try placing the file in the public folder and calling from there. I had a similar issue that was helped this way.
you're sure you specified the file path correctly, right ? react js may not automatically select your css file. Make sure you give it the right name.
in the Stylesheet.js file :
import '../components/myStyles.css' // sure you're calling it the right way from the right place
if the problem is still not resolved, we can examine the files as code snipped.
If you want to import css file to the component, you should do it this way:
import './myCss.css';
instead of
import myCss from './myCss.css';

Wrong Relative Directory Path: Unable to Import GraphQl files

I am trying to import a mutation from my GraphQL file into my LoginPage file like this:
import LoginMutation from '../../graphql/login-mutation';
but I keep getting an error that:
import LoginMutation from '../../graphql/login-mutation';
The mutation is present in the login-mutation file of my GraphQL folder. So most probably the path I am entering is wrong. Could someone please have a look at the picture of my directory structure and help me correct the path?
Try to add the extension of your file at the end of your route.

Unable to import base64 image into react component with webpack

I created a b64Images.js file in my images folder. Inside it I have the following:
export const placeholder = "data:image/png;base64,longb64string"
I'm trying to import it into one of my react components using:
import { placeholder} from '../../../images/b64Images.js'
It's able to find the file, but i'm getting the error:
Module parse failed: fullpath/b64Images.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
It's just a js file and my webpack is already configured to handle this. I don't have any issues importing my reducer functions.
The answer is to forget converting the images yourself, and install this package.
https://github.com/antelle/base64-loader
import { placeholder} from '../../../images/b64Images.js'
becomes
import placeholder from 'base64!../../../images/image.png'
sadness becomes happiness

Categories