I have red swiggly lines in visual studio code even when the variable is defined (error message).
If I disable eslint it will go away, but I don't think that's the correct approach and this would stop linting the rest of the ts/js files. (I have ESLint extension installed)
I have Visual Studio Code: 1.57.1 (Universal) on Mac OS Catalina.
I can right click and go to the browser definition.
beforeAll(async () => {
await browser.url('https://example.com/');
})
If I go to definition it looks like this below
The code snippet is in a .js file and this is the bottom right of visual studio code
How can I fix this? I also tried deleting this .vs folder, in one of the solutions mentioned here, but no luck: Visual Studio compiles fine, but it still shows red lines
Also installed these libraries in my code:
npm i
npm install @wdio/cli (https://webdriver.io/docs/gettingstarted/)
npx wdio config
I can compile my project, but how do I get rid of these red lines without disabling ESLint?
Thanks for the help!
beforeAll(async () => {
await browser.url('https://example.com/');
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js">
</script>Note: I'm not sure how to create a mvp of this code.
But the beforeAll is defined from a node module. I have included relevant files below.
node_modules/@types/jest/index.d.ts
declare var beforeAll: jest.Lifecycle;
My package.json file looks like this
{
"name": "test-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^16.14.2",
"@types/react-dom": "^16.9.8",
"axios": "^0.21.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"jest": {
"preset": "jest-playwright-preset"
},
"globals": {
"browserName": "BrowserType",
"browser": "Browser",
"context": "BrowserContext",
"page": "page"
},
"devDependencies": {
"@testing-library/react": "^11.2.3",
"@wdio/cli": "^7.7.4",
"@wdio/jasmine-framework": "^7.7.3",
"@wdio/local-runner": "^7.7.4",
"@wdio/mocha-framework": "^7.7.4",
"@wdio/spec-reporter": "^7.7.3",
"chromedriver": "^91.0.1",
"jest": "^26.6.0",
"jest-junit": "^12.0.0",
"jest-playwright-preset": "^1.6.1",
"playwright": "^1.12.3",
"ts-jest": "^26.5.4",
"ts-node": "^10.0.0",
"typescript": "^4.2.4",
"wdio-chromedriver-service": "^7.1.1",
"webdriverio": "^7.5.7"
},
"proxy": "https://localhost:5001",
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
}
This is using Jest and Web Driver for UI automation for browsers
This is the node_modules/jest-playwright-preset/types/global.d.ts file in the screenshots above
import {
Browser,
BrowserContext,
Page,
BrowserContextOptions,
LaunchOptions,
ConnectOptions,
ConnectOverCDPOptions,
BrowserType as PlaywrightBrowserType,
ViewportSize,
ChromiumBrowser,
FirefoxBrowser,
WebKitBrowser,
devices,
} from 'playwright-core'
import { Config as JestConfig } from '@jest/types'
import { Test } from 'jest-runner'
import { JestProcessManagerOptions } from 'jest-process-manager'
// TODO Find out flex ways to reuse constants
declare const IMPORT_KIND_PLAYWRIGHT = 'playwright'
declare const CHROMIUM = 'chromium'
declare const FIREFOX = 'firefox'
declare const WEBKIT = 'webkit'
declare const LAUNCH = 'LAUNCH'
declare const PERSISTENT = 'PERSISTENT'
declare const SERVER = 'SERVER'
declare module 'jest-playwright-preset' {
const globalSetup: (config: JestConfig.GlobalConfig) => void
const globalTeardown: (config: JestConfig.GlobalConfig) => void
const getPlaywrightEnv: (env?: string) => void
}
export type BrowserType = typeof CHROMIUM | typeof FIREFOX | typeof WEBKIT
export type SkipOption = {
browsers: BrowserType[]
devices?: string[] | RegExp
}
export interface TestPlaywrightConfigOptions extends JestPlaywrightConfig {
browser?: BrowserType
device?: ConfigDeviceType
}
export type GenericBrowser = PlaywrightBrowserType<
WebKitBrowser | ChromiumBrowser | FirefoxBrowser
>
type Nullable<T> = T | null
interface JestPlaywright {
/**
* Reset global.page
*
* ```ts
* it('should reset page', async () => {
* await jestPlaywright.resetPage()
* })
* ```
*/
resetPage: () => Promise<void>
/**
* Reset global.context
*
* ```ts
* it('should reset context', async () => {
* await jestPlaywright.resetContext()
* })
* ```
*/
resetContext: (newOptions?: BrowserContextOptions) => Promise<void>
/**
* Reset global.browser, global.context, and global.page
*
* ```ts
* it('should reset page', async () => {
* await jestPlaywright.resetBrowser()
* })
* ```
*/
resetBrowser: (newOptions?: BrowserContextOptions) => Promise<void>
/**
* Saves the coverage to the disk which will only work if `collectCoverage`
* in `jest-playwright.config.js` file is set to true. The merged coverage file
* is then available in `.nyc_output/coverage.json`. Mostly its needed in the
* `afterEach` handler like that:
*
* ```ts
* afterEach(async () => {
* await jestPlaywright.saveCoverage(page)
* })
* ```
*/
saveCoverage: (page: Page) => Promise<void>
configSeparateEnv: (
config: Partial<TestPlaywrightConfigOptions>,
isDebug?: boolean,
) => Promise<ConfigParams>
}
interface JestParams<T> {
(options: T, name: string, fn?: jest.ProvidesCallback, timeout?: number): void
}
type ProvidesCallback = (cb: ConfigParams) => void
interface JestParamsWithConfigParams<T> {
(
options: Partial<T>,
name: string,
fn?: ProvidesCallback,
timeout?: number,
): void
}
interface JestPlaywrightTestDebug
extends JestParamsWithConfigParams<JestPlaywrightConfig> {
(name: string, fn?: ProvidesCallback, timeout?: number): void
skip:
| JestParamsWithConfigParams<JestPlaywrightConfig>
| JestPlaywrightTestDebug
only:
| JestParamsWithConfigParams<JestPlaywrightConfig>
| JestPlaywrightTestDebug
}
interface JestPlaywrightTestConfig
extends JestParamsWithConfigParams<JestPlaywrightConfig> {
skip:
| JestParamsWithConfigParams<JestPlaywrightConfig>
| JestPlaywrightTestConfig
only:
| JestParamsWithConfigParams<JestPlaywrightConfig>
| JestPlaywrightTestConfig
}
declare global {
const browserName: BrowserType
const deviceName: Nullable<string>
const page: Page
const browser: Browser
const context: BrowserContext
const jestPlaywright: JestPlaywright
namespace jest {
interface It {
jestPlaywrightSkip: JestParams<SkipOption>
jestPlaywrightDebug: JestPlaywrightTestDebug
jestPlaywrightConfig: JestPlaywrightTestConfig
}
interface Describe {
jestPlaywrightSkip: JestParams<SkipOption>
}
}
}
type DeviceDescriptor = {
viewport: Nullable<ViewportSize>
userAgent: string
deviceScaleFactor: number
isMobile: boolean
hasTouch: boolean
defaultBrowserType: BrowserType
}
export type CustomDeviceType = Partial<DeviceDescriptor> & {
name: string
}
export type ConfigDeviceType = CustomDeviceType | string
export type DeviceType = Nullable<ConfigDeviceType>
export type WsEndpointType = Nullable<string>
export type SelectorType = {
script: string | Function | { path?: string; content?: string }
name: string
}
export type PlaywrightRequireType = BrowserType | typeof IMPORT_KIND_PLAYWRIGHT
export interface Playwright {
name: PlaywrightRequireType
instance: GenericBrowser | Record<BrowserType, GenericBrowser>
devices: typeof devices
}
type LaunchType = typeof LAUNCH | typeof SERVER | typeof PERSISTENT
type Options<T> = T & Partial<Record<BrowserType, T>>
export type ServerOptions = JestProcessManagerOptions & {
teardown?: string
}
export interface JestPlaywrightConfig {
haveSkippedTests?: boolean
skipInitialization?: boolean
debugOptions?: JestPlaywrightConfig
launchType?: LaunchType
launchOptions?: Options<LaunchOptions>
connectOptions?: Options<ConnectOptions | ConnectOverCDPOptions>
contextOptions?: Options<BrowserContextOptions>
userDataDir?: string
exitOnPageError?: boolean
displayName?: string
browsers: (BrowserType | (JestPlaywrightConfig & { name: BrowserType }))[]
devices?: ConfigDeviceType[] | RegExp
useDefaultBrowserType?: boolean
serverOptions?: ServerOptions | ServerOptions[]
selectors?: SelectorType[]
collectCoverage?: boolean
}
export type JestPlaywrightProjectConfig = Test['context']['config'] & {
browserName: BrowserType
wsEndpoint: WsEndpointType
device: DeviceType
}
export type JestPlaywrightContext = Omit<Test['context'], 'config'> & {
config: JestPlaywrightProjectConfig
}
export type JestPlaywrightTest = Omit<Test, 'context'> & {
context: JestPlaywrightContext
}
export interface BrowserTest {
test: JestPlaywrightTest
config: JestPlaywrightConfig
browser: BrowserType
wsEndpoint: WsEndpointType
device: DeviceType
}
export type ConfigParams = {
browserName: BrowserType
deviceName: Nullable<string>
browser: Nullable<Browser | BrowserContext>
context: BrowserContext
page: Page
}
