Search code examples
typescriptmocha.jswebdriver-io

Cannot use import alias in component tests

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: enter image description here

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

Solution

  • Adding the vite config helped. I'm not sure why isn't it added with the wdio installation or at least not documented anywhere