I need to play around with some explicit JS functionality, in my example with Collapse:
const collapse = new bootstrap.Collapse(element, { toggle: false });
collapse.show();
To make this work, I have to following definition:
declare let bootstrap: any;
I get a Unexpected any. Specify a different type. lint error.
Is there an easy way to fix it, or just give it a suppress warnings with:
// eslint-disable-next-line #typescript-eslint/no-explicit-any
Related
I'm trying to follow this article here to add cy.session() to my login function. However when I do this and then run my test, I get the error cy.session is not a function
I've set "experimentalSessionSupport": true in my cypress.json config file (and confirmed that my test is seeing this value as true too). From my understanding, that should be all I need to do, but obviously I'm missing something.
I'm using Cypress version 9.4.1. I've tried creating a custom login command instead (exactly as in the article) but just get the same error when running it.
My test works perfectly without the cy.session() command.
login.js:
class LoginPage {
...
login(username, password) {
cy.session([username, password], () => {
cy.visit('/login');
this.emailField.type(username);
this.passwordField.type(password);
this.loginButton.click();
});
}
}
export default new LoginPage();
cypress.json:
{
...
"experimentalSessionSupport": true
}
I'm using Cypress version 9.4.1.
Welp, this wasn't actually true. I was still on a version that didn't support cy.session(). Silly mistake on my end. It's now all working fine since upgrading Cypress.
Is it a Typescript error - TypeError: cy.[custom command] is not a function?
If so, the type definition is probably not added yet due to experimental flavour.
Add same definition as you would use for a custom command to the top of the test.
This is taken from the latest release.
declare namespace Cypress {
interface SessionOptions {
validate?: () => false | void
}
interface Chainable<Subject = any> {
session(
id: string | object,
setup?: SessionOptions['validate'],
options?: SessionOptions
): Chainable<null>
}
}
I am going through a book on Test Driven Development in React. I've never written JavaScript tests before. The author presents the following Jest code in a file titled calc.test.js:
var add = require('./calc.js')
describe('calculator',function() {
it('add two numbers',function() {
expect(add(1,2)).toEqual(3)
})
})
but VS code automatically translates it to:
const { hasUncaughtExceptionCaptureCallback } = require('process')
const { isTypedArray } = require('util/types')
var add = require('./calc.js')
describe('calculator', function () {
isTypedArray('add two numbers', function () {
hasUncaughtExceptionCaptureCallback(add(1, 2).toEqual(3))
})
})
The author states that his version uses syntax "borrowed from" jasmine. Is that why VS Code changed it? How do I turn this feature off? Jest is installed.
Seems like vscode tries to autocomplete it and expect, and auto imports the modules process and utils/types.
Even though manually importing isn't required per the jest documentation:
In your test files, Jest puts each of these methods and objects into
the global environment. You don't have to require or import anything
to use them. However, if you prefer explicit imports, you can do
import {describe, expect, test} from '#jest/globals'.
You can silence vscode warnings by explicitly importing:
import {describe, expect, test} from '#jest/globals'
I'm having some trouble with adding them into some existing projects. For example, I have a class in a module that I developed:
export default class ClassName {
// Class members
}
Now I import that into another project:
import ClassName from 'modulename';
const object = new ClassName();
I get 2 errors on this line.
On the object in const object:
error Unsafe assignment of an any value #typescript-eslint/no-unsafe-assignment
On the new in new ClassName:
error Unsafe construction of an any type value #typescript-eslint/no-unsafe-call
How can I avoid these errors?! I would really like to be able to follow these rules because I think they'd be so useful!
Thanks.
Here's another example:
import { readJsonSync } from 'fs-extra';
const testEnv = readJsonSync(testEnvPath);
Here I get the no-unsafe-assignment error on the testEnv of const testEnv, and the no-unsafe-call error on the readJsonSync call on the second line.
I can get rid of the first one with this code:
interface ITestEnv {
// interface members
}
const testEnv: ITestEnv = readJsonSync(testEnvPath) as ITestEnv;
however, I still can't figure out how to get rid of the second one on the readJsonSync call.
ESlint can not resolve the absolute import of your module,
which makes it to infer your class type as any.
Make sure baseUrl and paths in tsconfig.json file used by ESlint are defined correctly.
#see Typescript – Module Resolution
In the first case, you have just one error coming from the constructor, which is cascading to the const assignment. Something in your class implementation is making the type-inference to be inferred as any.
Not saying your code is incorrect. It might be, but there's an (open issue on Github) reporting a constructor as being incorrectly flagged by the same rule.
On your second issue, have you added #type/fs-extra as a project dependency? Many npm packages do not have types themselves. Types are created by someone and added to the #types library. When that's the case, the #types/package_name must be added as a dependency separately.
I'm making a library based on TSDX, nice and powerful CLI for package development which is based on Rollup and allows customization of its config. I have a bunch of country flags SVGs in my project and I need to import them and show them dynamically when they are needed. It wasn't clear for me how dynamic imports are working there and is it a problem of TSDX or Rollup itself, so I opened up an issue in TSDX' repository about that. People helped me out so now there are two ways that I can see to achieve that:
Use rollup-plugin-copy and then require all the files statically through a switch statement.
Use a virtual module that exports an object containing all file names in a directory as described here in one of the Rollup's issues (#2463).
I feel like writing a switch statement manually for all of the country flags is not the best idea in my life, so I thought that second path is better as it doesn't require me to maintain more code, because it'll just generate the code that I need. So I set up a little TSDX package for testing with a single React component that looks like this:
import test from 'testmodule'
export default function () {
return test
}
Now testmodule is what should be resolved by Rollup. I have this config now:
module.exports = {
rollup (config) {
config.plugins.unshift({
name: 'plugin-test-module',
resolveId (id) {
console.log('resolveId', id);
if (id === 'testmodule') {
return id;
}
return null;
},
load (id) {
if (id === 'testmodule') {
return 'export default "Test is successful"';
}
return null;
},
});
return config;
},
};
So what should happen is I just need to see "Test is successful" in the browser.
Unfortunately, npm run build fails with error Cannot find module 'testmodule'. I've put console.log into resolveId() to see what's happening, and looks like it never receives testmodule in its id. I replaced unshift with just straight assignment to config.plugins (so it removes other Rollup plugins) and it successfully compiled, although I understand that this is bad, so it's not a solution. I've read Rollup's docs and it seems like some other plugin added by TSDX like node-resolve may be trying to resolve the import instead of my plugin, but I can't find a way to stop that. So the main question is how to get my plugin to work along with others like node-resolve.
If you're interested about what other plugins TSDX uses, they're all can be found here. Seems like Rollup doesn't do tech support on their issues page so I hope somebody here is familiar enough with it to help me with this stuff.
I've solved this issue, with #rollup/plugin-replace.
// .. another rollup plugin
const replace = require('#rollup/plugin-replace');
rollup(config, options) {
config.plugins.push(
replace({
delimiters: ['', ''],
values: {
'../../../assets': './assets',
'../../../../assets': './assets',
},
})
);
// ... your other config
return config;
},
So that will replace this:
function Image({ name, ...props }: ImageProps) {
const src =
name === 'bank-indonesia'
? require(`../../../assets/images/${name}.jpg`).default
: require(`../../../assets/images/${name}.svg`).default;
return <img alt={name} src={src} {...props} />;
}
Into this:
function Image(_ref) {
var name = _ref.name,
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
var src = name === 'bank-indonesia' ? require("./assets/images/" + name + ".jpg")["default"] : require("./assets/images/" + name + ".svg")["default"];
return React.createElement("img", Object.assign({
alt: name,
src: src
}, props));
}
I know this is really bad solution, but it works for be btw.
I'm trying to use decorators on classes in React, using babelify. I have the 'es7.decorators' option applied in babel, but I keep getting an 'unexpected token' error when it encounters the '#' character.
Anyone have any ideas? A simple example is below.
Decorator:
export default function(Component) {
return class extends Component {
constructor() {...}
}
}
Class:
import myDecorator from 'decorator';
#myDecorator
class MyClass{...}
I'm using babelify (Browserify transform for Babel):
browserify().transform(babelify.configure({
optional: ['es7.decorators']
})
Thanks to #LeonidBeschastny for mentioning .babelrc file, using the config file decorators work correctly, using the setup described on the babelify readme doesn't work, for whatever reason (not sure if my setup or something else).
In case anyone else ran into this problem, I was having the same problem.
I think there were breaking changes outlined here: http://babeljs.io/blog/2015/03/31/5.0.0/#babelrc
All I needed to do was add { "stage": 1 } to my babelrc, which tells babel to compile with the experimental features, one of which is the es7 decorator.