Jestjs gives me this error when I am testing a react component:
import {Session} from 'meteor/session' ". The error is "Cannot find module 'meteor/session' "
myTestFile
import PlanSetup from "../../../ui/pages/planSetup/planSetup";
let PlanSetupWrapper;
const PlansetupProps={
name: "string",
budget: "string",
lang: { english: "en",
French : "fr"
}
};
describe('<PlanSetup />', () => {
PlanSetupWrapper = mount(<PlanSetup {...PlansetupProps}/>);
it('All child components renders correctly', () => {
expect(PlanSetupWrapper).toMatchSnapshot();
});
});
**jest.config.js**
module.exports = {
moduleNameMapper: {
"^meteor/(.*)": "<rootDir>/imports/tests/mocks/meteor.js"
},
transform: {
"^.+\\.(js|jsx)?$": "babel-jest",
".+\\.(css|styl|less|sass|scss)$": "/home/megha/Megha/TVStack/dan-tvstack-ui/node_modules/jest-css-modules-transform",
},
moduleFileExtensions: [
'js',
'jsx'
],
modulePaths: [
"<rootDir>/node_modules/"
],
globals: {
"window": true
},
unmockedModulePathPatterns: [
'/^imports\\/.*\\.jsx?$/'
],
setupFiles: [
"<rootDir>/setupTests.js"
]
};
**<rootDir>/imports/tests/mocks/meteor.js**
exports._session = {
__: function(value) { return value }
};
Welcome to Stack Overflow #MeghaRawat. There are a couple of things to consider here.
1) Keeping your components pure
2) Mocking up Meteor services
What this means is that any React components should be as pure as possible, and not reference Meteor - the containers should do that, and pass props to the components.
Jest doesn't know about Meteor, so any Meteor features will need to be stubbed, to prevent the the kind of problems you are encountering.
I may be able to find some code to help you if you need it.
Related
My eslint .eslintrc.js, now properly in the src folder, is the following:
module.exports = {
env: {
browser: true,
commonjs: true,
es2021: true
},
extends: [
'plugin:vue/vue3-recommended',
'standard',
'prettier'
],
parserOptions: {
ecmaVersion: 2020,
parser: '#typescript-eslint/parser',
'ecmaFeatures': {
'jsx': true
}
},
plugins: [
'vue',
'#typescript-eslint'
],
rules: {
'import/no-unresolved': 'error'
},
settings: {
'import/parsers': {
'#typescript-eslint/parser': ['.ts', '.tsx']
},
'import/resolver': {
'typescript': {
'alwaysTryTypes': true,
}
}
}
}
I'm attempting to use eslint-import-resolver-typescript, but the documentation is a bit opaque.
I currently get errors on lines where a externally defined type is used (StepData in this example):
setup() {
const data = inject("StepData") as StepData;
return {
data,
};
},
The answer was the following. In types.d.ts (or other file if you want to have different collections of your custom types):
export interface MyType {
positioner: DOMRect;
content: DOMRect;
arrow: DOMRect;
window: DOMRect;
}
export interface SomeOtherType {
.. and so on
Then in the .vue files, import the types I need for the component:
import type { MyType, SomeOtherType } from "../types/types";
Before I was not using the export keyword and the types just worked without being imported. They have to be imported like this if you use export. It's kind of amazing how you are just expected to know this, the documentation for Typescript or Vue is sorely lacking in examples.
I'm using a CustomTransformer to update imports from:
import { global_spacer_form_element } from '#patternfly/react-tokens';
export const disabledLabelClassNameEx = global_spacer_form_element.var;
to
import global_spacer_form_element from '#patternfly/react-tokens/dist/js/global_spacer_form_element';
export const disabledLabelClassNameEx = global_spacer_form_element.var;
However, when using with ts-loader I get the following output (directly from ts-loader):
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.disabledLabelClassNameEx = void 0;
const global_spacer_form_element_1 = __importDefault(require("#patternfly/react-tokens/dist/js/global_spacer_form_element"));
exports.disabledLabelClassNameEx = react_tokens_1.global_spacer_form_element.var;
//# sourceMappingURL=Recipient2.js.map
Instead of using global_spacer_form_element directly, it is using react_tokens_1.global_spacer_form_element.
I suppose there is something missing in the transformer that the typescript compiler is using to build that react_tokens_1 variable.
The transformer is doing the following in its visitor (I'm simplifying the transformer code for the sake of showing the path it takes, full code can be see here):
const visitor: ts.Visitor = (node) => {
if (ts.isSourceFile(node)) {
return ts.visitEachChild(node, visitor, context)
}
if (!ts.isImportDeclaration(node) /* or if the lib name is not '#patternfly/react-tokens' */) {
return node
}
// for simplicity assume we take all NamedImports and the only found is...
const elements = ['global_spacer_form_element']
const importPath = '#patternfly/react-tokens/dist/js/global_spacer_form_element'
return elements.map((e) => {
return ts.factory.createImportDeclaration(
undefined,
undefined,
ts.factory.createImportClause(
false,
ts.factory.createIdentifier(e),
undefined,
),
ts.factory.createStringLiteral(importPath),
)
})
}
My tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"allowJs": true,
"checkJs": false,
"jsx": "react",
"outDir": "./build",
"removeComments": true,
"pretty": true,
"skipLibCheck": true,
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true,
"noImplicitAny": false,
"sourceMap": true,
"resolveJsonModule" : true
},
"include": [
"./src/**/*"
],
"exclude": [
"./node_modules/*",
"**/*.js"
]
}
and finally the ts-loader config:
{
test: /src\/.*\.tsx?$/,
loader: 'ts-loader',
exclude: /(node_modules)/i,
options: {
getCustomTransformers: () => ({
before: [
tsImportPluginFactory({
libraryName: '#patternfly/react-tokens',
libraryDirectory: 'dist/js',
camel2DashComponentName: false
})
]
})
}
Any idea of what else I need to update or what I could check to ensure this transformer works as I am expecting?
edit: Reference to old import is gone, but I didn't notice before that the new import also gets transformed: e.g. from foobar to foobar_1.
The TypeScript compiler has four main phases—parsing, binding, type checking, and emitting. Binding is where the relationships between identifiers are resolved, but transformation happens during the "emitting" phase. So by the time you're transforming it's too late and the compiler has already figured out what identifiers it's going to transform.
One way to do what you want to do, is to traverse all the nodes in the file, find the identifiers that match one of the ones in your import, then recreate those identifiers by returning context.factory.createIdentifier(node.escapedText) in the visitor for that node. That will make the compiler leave the node as-is when emitting.
The trouble though may be figuring out which identifiers in a file reference the named import identifier. Generally I don't recommend using the type checker in transforms because it can lead to unexpected results when there are multiple transformations happening on a file, but you might be able to get away with first checking if the identifier's escapeText matches, then checking if typeChecker.getSymbolAtLocation(node)?.declarations[0] equals the named export identifier found in the original import declaration. Alternatively, I think you would have to implement your own scope analysis.
We're building a website for a customer and the customer demands both an english and an arabic version of the website.
We're using infernojs#7 with webpack#4 and we're bundling css using webpack as well.
We're applying https://github.com/nicolashemonic/rtl-css-transform-webpack-plugin so that we get two versions of our output css file : RTL version and LTR version, our filenames are hashed for caching obviously.
Here is the Problem : how to choose at runtime between the rtl css file and ltr css file when we don't know their name(because of the hash) ?
I'm thinking of using react-helmet in root component to do something like
<link rel="stylesheet" href={this.state.lang==='ar' ? 'bunldename.rtl.css' : 'bundlename.css'}/>
<!-- we'll actually get lang from route but that's not the point-->
My only problem is getting the bundlename, I thought of using DefinePlugin but I couldn't get bundlename even in webpack.config.js.
Here is my webpack config:
const HtmlWebpackPlugin = require('html-webpack-plugin'),
RtlCssPlugin = require('rtl-css-transform-webpack-plugin'),
ExtractCssChunks = require('extract-css-chunks-webpack-plugin'),
HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin'),
path = require('path');
const commonPlugins = [
new ExtractCssChunks({
'filename': 'css/[name].[contenthash].css'
}),
new RtlCssPlugin({
filename: 'css/[name].[hash].rtl.css'
}),
new HtmlWebpackPlugin({
'title': 'mytitle',
'template': 'index.html',
excludeAssets: /\.css/u
}),
new HtmlWebpackExcludeAssetsPlugin()
];
const productionPlugins = [
...
];
module.exports = (_env,argv) => ({
'entry': './src/index.jsx',
'output': {
'path': path.resolve('../public'),
'filename': 'js/main.[contenthash].js'
},
'plugins': argv.mode === 'development' ? commonPlugins : [...commonPlugins,...productionPlugins],
'module': {
'rules': [
{
'test': /\.(js|jsx)$/u,
'use':
{
'loader': 'babel-loader',
'options': {
'presets': ['#babel/preset-env'],
'plugins': [['babel-plugin-inferno', { 'imports': true }]]
}
}
},
{
'test': /\.css$/u,
'use': [ExtractCssChunks.loader, 'css-loader']
}
]
},
'devServer': {
'host': '0.0.0.0',
'historyApiFallback': true,
'contentBase': './public',
'publicPath': 'http://localhost:8080/'
},
'resolve': {
'alias': {
'inferno': (argv.mode === 'development')
? 'inferno/dist/index.dev.esm.js'
: 'inferno/dist/index.esm.js',
'react': 'inferno-compat',
'react-dom': 'inferno-compat'
}
}
});
The basic setup of my little Vue app follows the basic Vue Cli 3 setup:
-main.js (= root)
-- App.vue
--- Navigation.vue (this one calls $root)
In main.js's created() there is this function to load the json for the navigation menu:
[...]
data() {
return {
navMainItems: null
staticTestItems: [
{ "id": 0, "title": "test 1, "url": "/" },
{ "id": 1, "title": "test 2, "url": "/" }
]
}
},
created() {
axios.get('navigation/navAllItems.json')
.then((response) => {
this.navMainItems = response.data.navMainItems;
[...]
}
which works fine.
Now I would like to call that data from the Navigation.vue component using "this.$root":
data(){
return {
navItems: null,
localStaticTestItems: this.$root.staticTestItems
}
},
created() {
// Check if static elements loaded
console.log("sampleNavItems =", this.$root.sampleNavItems)
},
mounted(){
// This fails, presumably because of asynchonicity
// Can this be fixed?
this.navItems = this.$root.navMainItems
}
While the static elements are loaded perfectly fine, the asynchronously loaded navItems do not update.
I am well aware of other approaches like "event bus", "props", or "VueX", but for not I would like to use the dialog with the $root component and learn how to react to asynchonicity - if that is at all possible in this scenario.
I'm not 100% sure, but in your case making navItems in your child component a computed property might work:
computed: {
navItems() { return this.$root.navMainItems }
}
Here's a fiddle with example: http://jsfiddle.net/eywraw8t/268423/
Noob question here. Trying to assure myself that babel-preset-env works.
I install babel-core and babel-preset-env:
yarn add --dev babel-core
yarn add --dev babel-preset-env
My package.json has:
"babel": {
"presets": [
[
"env",
{
"targets": {
"browsers": [
"IE >= 8"
]
}
}
]
]
},
I create a JS script to test:
fs.readFile('my.js', 'utf8', (err, data) => {
if (err) throw err;
let babel = require("babel-core");
let result = babel.transform(data).code;
});
I test with arrow functions in my.js:
new Promise((resolve, reject) => {
console.log('whatever');
});
No matter how I tweak targets.browsers, the arrow function does not get converted.
Tested this with babel-cli. Works.
It's clear that babel-core (the Javascript API of Babel) does not pick up anything from package.json.
Filed an issue here too: https://github.com/babel/babel/issues/7647
The JS API docs probably needs to be updated.
In order to use babel-preset-env in JS API:
const { execFile } = require('child_process');
const ug = require('uglify-es');
const { execFile } = require('child_process');
execFile('npx', ['babel', 'my.js'], (err, data, stderr) => {
if (err) throw err; // U get the idea
let result = ug.minify(data, { mangle: { toplevel: true } }).code;
});