Setting up a Jest test ('App-test.js') for a Redux action ('App.js') in a directory app/__tests__:
Here's the header of App.js:
jest.unmock('../../modules/actions/App.js')
import React from 'react'
import ReactDOM from 'react-dom'
import TestUtils from 'react-addons-test-utils'
import * as App from '../../modules/actions/App.js'
In app/ there is a module config.js. This is being imported where it is needed.
The problem is, when I run my Jest tests, such as App-test.js, it is looking for config and not finding it:
FAIL __tests__/actions/App-test.js
Runtime Error
Error: Cannot find module 'config' from 'User.js'
And User.js is importing config like so:
import config from 'config'
User.js is another action being used App.js.
Any ideas?
You should specify the module location, otherwise Node.js will try to guess the location for you, like:
node_modules/config.js
node_modules/config/index.js
node_modules/config/package.json
The problem in your code is the assumption that node will look for the file in the desired location, as you can see in the algorithm I provided in the previous lines.
To fix the issue you have to specify the location inside your User.js file, for example, check the hypothetical file organization:
/
/config.js
/app
/app/User.js
Then, you'd import inside User.js:
import config from '../config.js'
The file config.js is relative to User.js, located in the parent directory.
Related
This is the directory I'm working in:
Now, Auth.js is importing a component from components like this:
import AuthNavbar from "components/Navbars/AuthNavbar.js";
Should'nt it be
import AuthNavbar from "../components/Navbars/AuthNavbar.js";
How is that import even working?
This might be working because your webpack configuration most likely has an alias.
I want to have a config directory, with every config in a file. So at the start of my react app, everything in the config folder runs. Also if you have a better approach I would be happy to know 😊
For example (/config):
firebase.js
import * as firebase from 'firebase'
import 'firebase/auth'
import 'firebase/firestore'
const firebaseConfig = {
// ...
}
firebase.initializeApp(firebaseConfig)
material-ui.js
import coolThings from 'whatever'
// ...
export theme
You get the idea
Create an index file inside config, and import every config file there. Then import the config directory inside the main app. That way the imported directory will run the index.js (config/index.js), this will run every config file inside the config folder.
I'm trying to import a css file in the previous folder,i.e src folder, before the one that the component is in but it keeps on bringing this error, Please what am I doing wrong
Failed to compile
./src/components/LoginComponent.js
Module not found: Can't resolve './src/styles.css' in 'C:\Users\Iruene Adokiye\app-react\src\components'
To import src/styles.css from your component located at src/components/LoginComponent.js, you have to import from one directory up:
import `../styles.css`;
if your project structure is like this:
- src/
- components/
- LoginComponent.js
- style.css
Then inside your LoginComponent use:
import from '../styles.css';
or named import
import styles from '../styles.css';
.. means "above" folder.
. means same folder.
I am trying to access a specific directory in javascript. I tried to have access to it using require keyword as shown below
const path = require('../../var/opt/personal/guest/op/op_12201/data/persGuesOapDataFolder00/');
but when i run the code i get the following error:
Error: Cannot find module '../../var/opt/personal/guest/op/op_12201/data/persGuesOapDataFolder00/'
please let me know how import or to use a directory in javascript
You can't possibly just import a directory unless there is index.js file within it. And in that index.js file, it should at least contain:
index.js:
import Foo from './Foo.js'
import Bar from './Bar.js'
export {
Foo,
Bar
}
And then you can finally import it:
import {Foo, Bar} from '../../components';
When you point to a directory without specifying the file, the index.js file is imported. I do not think it's possible to import an entire directory. If you want to import all the functions of a directory, you can create an index.js and explicitly export them.
See: node.js require all files in a folder?
you can do this in two different way
consider the following folder structure
-- app/
|- asset/
|- user.js
|- main.js
here main.js you can import the user.js in this way import user from '../asset/user'
other way is installing dotenv using npm i dotenv --save and following way
require('dotenv').config();
import user from './asset/user
I have a file hierarchy as follows:
-native
-app
-components
login.js
-redux
-modules
-users.js
In my login.js file, I attempt to import the users.js redux into my code as such:
import { actions as usersActions} from "../../../redux/modules/users";
It is shared code and I cannot put the redux code in native/
The error I get is:
Unable to resolve module ../../../redux/modules/users. ... Unable to find this module in its module map or any of the node_modules directories.
I've looked at the other questions, such as: React import from parent directory but in the comments it states it to be impossible. I've also tried the fixes in https://github.com/facebook/react-native/issues/4968 but that seems to be mostly for node-modules.
Try creating a symbolic link inside the native directory that references the parent directory