I have files as follows
widgets
|
--tabs
|
-- __mocks_
|
-- index.ts
-- index.ts
--button
|
-- __mocks_
|
-- index.ts
-- index.ts
Its imported/used in files as
import { Button } from 'common/widgets/button';
I can individually mock each of these.
jest.mock('common/widgets/tabs');
jest.mock('common/widgets/button');
But is there a way to mock them all like add all these to file and import them or do like below with a common mock folder and an index file.
jest.mock('common/widgets');
You can do it this way (P.S. All functions and function calls are just for demonstration:
Folder structure
widgets/button/index.js
// demonstration
const someFunction = () => {
console.log("widgets/button")
}
export default someFunction;
widgets/tabs/index.js
// demonstration
const someFunction = () => {
console.log("widgets/tabs")
}
export default someFunction;
widgets/index.js
export { default as Button } from './button/index';
export { default as Tabs } from './tabs/index';
-- Usage
You can import the functions as named import in any file. E.G.:
/any/file.js
import { Button, Tabs } from 'common/widgets'
...
So, you should be able to import them into a single mock file.
mock/index.js
jest.mock('common/widgets');
When we import any module in the test file then jest checks whether there is an mock implementation of that module is present in the ./__mocks__ directory or not. If jest founds it then jest will simple mock that module.
Here in your case, you already have mock modules in your ./__mocks__ directories. You don't need jest.mock() api to mock your modules.
Jest mock is meant to mock modules not directories which contains modules.
Related
It's a common thing to create a index.js file in an React application with the only purpose to export several modules, in order to avoid having too many import statements on other components. This can be done by:
index.js
export { Credits } from './Credits.js';
export { SocialMedia } from './SocialMedia.js';
any module that might use those exports:
import * as var_name from index.js
And this is very nice. It wraps exports into a single file. However, when I changed my project to React with typescript, I found that .tsx files cannot be exported like that. The image below is the error I got after changing the project to typescript and the extensions became .tsx
Is there a way of 'bundle' export React .tsx files with the structure shown above? If not, what is the simplest way of centralizing .tsx files export?
My webpack.config.js:
module.exports = {
module: {
rules: [{
test: /\.scss$/,
use: ["sass-loader"]
}]
}
};
You can definitely use the same style of having an index file to group up exports for a whole folder. The simplest way around your problem would be to omit the file extension (assuming you only have one "index" file in the folder).
For example, let's say you have a component in 'common/Example.tsx':
import React from 'react'
export const Example = () => (<div>I'm an example component</div>)
You can then export it in an index file 'common/index.tsx':
export { Example } from './Example'
And import it from somewhere else, e.g. 'App.tsx':
import { Example } from './common'
I am making a Shared library with the following structure
src
modules
-- module1.ts
-- module2.ts
-- index.ts // reexports from module1.ts and module2.ts
utils.ts // exports someUtils
logger.ts
index.ts // re-exports from utils.js and logger.js
Now in my service-A and service-B I can do something like
import { someUtil } from '#project/shared since someUtil is exported in the main index.ts, but how can I access something exported from module1.ts without having to do import { module1Variable } from '#project/shared/src/modules/index ?
I have a large third party library that I need to share between two projects. The project has multiple folders with multiple files that contain multiple exports. Instead of importing these modules like this
import {BaseContainer} from '#company/customproject/src/containers/BaseContainer.js'
I would like to do this
import { BaseContainer } from '#company/customproject'
I know I can manually import all the modules into a single index.js file in the base directory but i am wondering if there is an easier way to do not have import them all explicitly
I know I can manually import all the modules into a single index.js file in the base directory but i am wondering if there is an easier way to do not have import them all explicitly
You should really just create an index.js file and import into that whatever you want to export so that you can control what APIs get exported and to not export private APIs.
That said there is an automated tool that generates an index.js automatically for you:
> npm install -g create-index
> create-index ./src
Which will generate an index.js with all the exports.
As the other answer suggests, you should create an index.js within each directory and explicitly export contents
#company/customproject/index.js
import {BaseContainer, SomeOtherContainer} from './src/containers'
export {
BaseContainer,
SomeOtherContainer
}
#company/customproject/src/containers/index.js
import BaseContainer from './BaseContainer'
import SomeOtherContainer from './SomeOtherContainer'
export {
BaseContainer,
SomeOtherContainer
}
Another option to autoload an entire directory is using require and module.exports to export every scanned file, however. You would likely run into conflicts using both ES6 import/export along with module.exports and default export statements.
#company/customproject/index.js
const fs = require('fs')
const modules = {}
fs.readdirSync(__dirname+'/src/containers').forEach(file => {
file = file.replace('.js', '')
modules[file] = require('./src/containers/'+file)
// map default export statement
if (modules[file].default) {
modules[file] = modules[file].default
}
})
module.exports = modules
Then simply use it in any ES5 or ES6 module
const {BaseContainer} = require('#company/customproject')
or
import {BaseContainer} from '#company/customproject'
If I wanted to do this in all my test.js files:
import { shallow } from 'enzyme';
import MockAdapter from 'axios-mock-adapter';
Is there a way to globally import it so that every 'tests.js' file will automatically have that imported?
Thanks in advance!!!
You can use globals!
Example:
setup.js
import { _shallow } from 'enzyme'
import _MockAdapter from 'axios-mock-adapter'
global.shallow = _shallow
global.MockAdapter = _MockAdapter
test1.js
describe('My Test 1', _ => {
MockAdapter() // Use it!
})
Notes:
Global variables will solve this particular issue. But the caveat is that you will have one instance across each test (which might be ok depending on the dependencies you import)
EDIT: In context of react-boiler-plate
If you read package.json, you'll see that there is a test setup file within "jest".
This path is react-boilerplate/internals/testing/test-bundler.js.
Edit that file with the contents of setup.js (aforementioned)
Now each one of your tests should have the variables defined
In my Angular 2 app, I have a settings.js file with various exports that I want to use throughout the application:
exports.httpPort = 9000;
exports.httpsPort = 1435;
exports.segmentID = 1;
I want to export some of these into my ts component file query.component.ts, but I'm at a loss on what the correct syntax to do so is.
I see that many .js files have something along the lines of
var settings = require('../../settings');
which grabs the settings file and then
settings.dbConfig
Which calls the export, but it doesn't work on my component file.
This is my project file structure:
component.ts
- project/web/src/app/component.ts
-Place where I want to import an export from settings.js.
settings.js - project/server/settings.js
-File where I want to make the export.
First you'll need to set the allowJs flag in your tsconfig.json file to allow js module imports.
// tsconfig.json
{
"compilerOptions": {
"allowJs": true
}
}
Then you can import your settings.js module in your component
// component.ts
import * as Settings from '../../../server/settings.js';
Now you can use Settings in your component Settings.httpPort