I'm trying to use simple React component tests with WebdriverIO, Mocha and TypeScript. I met an issue specifically related to using import aliases in WebdriverIO.
I have simple template components and one of them imports another component using the alias:
// Comp1.tsx:
import Comp2 from '@app/components/comp2/Comp2';
So when I execute a test which just renders the component:
/// <reference types="@wdio/globals/types" />
import React from 'react'
import { render } from '@testing-library/react'
import Comp1 from '../src/components/Comp1'
describe('Test', () => {
it('should render a component', async () => {
render(<Comp1 />)
})
})
I'm getting the error:
Error: Test failed due to the following error: [plugin:vite:import-analysis] Failed to resolve import "@app/components/comp2/Comp2" from "src/components/Comp1.tsx". Does the file exist?
The imports in components are correct, the app can be started without errors so it's only an issue within the WebdriverIO configuration.
Here's my tsconfig.json
:
"baseUrl": "./",
"paths": {
"@app/*": ["src/*"]
}
Here's a part of my wdio.conf.ts
:
mochaOpts: {
ui: 'bdd',
timeout: 6000000,
// requireModule: ['tsconfig-paths/register']
},
I found this article about using aliases in WebdriverIO and I tried to use the tsconfig-paths/register
as advised here.
When I uncomment the requireModule
in wdio.conf.ts
, I get an error:
TypeError: self[opt] is not a function\n' +
[0-0] ' at http://localhost:51604/node_modules/mocha/browser-entry.js:161:18\n'
NOTE: The error happens even when I don’t use any component imports, it’s just about the requireModule: ['tsconfig-paths/register']
itself.
The project contains the following configs:
How to use import aliases with WebdriverIO? There's nothing in their documentation unfortunately.
UPD1: I've tried adding alias to the web pack config like this:
resolve: {
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
alias: {
"@app/*": ["src/*"],
},
},
It didn't affect anything
Adding the vite config helped. I'm not sure why isn't it added with the wdio installation or at least not documented anywhere