Calling jest test scripts from k6

Grafana k6
1

Hello, I am new to k6 and have been using it for the past two weeks for testing our web application written in React and Typescript. So I am trying to load test the application during logging in. Our team has already written the script for login functionality using Jest framework in Typescript. So I am looking for a way to call the script from my k6 test script. Is there any way of doing that?

Thanks.

2

While doing some research I came to know about the k6 typescript template

I cloned this template to my existing React and typescript project. But when running the npm run bundle command I get the same errors

ERROR in ../src/e2e/helpers/flows/loginFlow.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\vignesh.t\SkillfitFrontend\src\e2e\helpers\flows\loginFlow.ts: Unexpected token, expected "," (11:36)

   9 | import { TEST_CLIENT_ID } from '../../e2e.test';
  10 |
> 11 | export const loginTest = async (page: Page, url: string): Promise<void> => {
     |                                     ^
  12 |   console.info('Logging in...');
  13 |
  14 |   //-----Login-----//
    

ERROR in ../src/e2e/helpers/intercepts.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\vignesh.t\SkillfitFrontend\src\e2e\helpers\intercepts.ts: Unexpected token, expected "," (7:46)

   5 | import { logRequest, logResponse, mockedCloudfrontResponseHeaders } from '~/e2e/helpers';
   6 |
>  7 | export const setBasicPageInterceptions = (page: Page): void => {
     |                                               ^
   8 |   try {
   9 |     page.on('console', (message: ConsoleMessage, args) => {
  10 |       if (args) DEBUG && console.info(Bright('[PAGE] ') + message.text(), ...args);
   

ERROR in ../src/e2e/helpers/logging.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\vignesh.t\SkillfitFrontend\src\e2e\helpers\logging.ts: Unexpected token, expected "," (6:34)

  4 | import * as readline from 'readline';
  5 |
> 6 | export const temporarilyLog = (str: string): void => {
    |                                   ^
  7 |   readline.clearLine(process.stdout, 0);
  8 |   readline.cursorTo(process.stdout, 0);
  9 |   process.stdout.write(Dim(str));
    

ERROR in ../src/e2e/helpers/resetLocalStorage.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\vignesh.t\SkillfitFrontend\src\e2e\helpers\resetLocalStorage.ts: Unexpected token, expected "," (6:47)

  4 | import { HTTPRequest } from 'puppeteer';
  5 |
> 6 | export const resetLocalStorage = async (browser: BrowserContext, url: string): Promise<void> => {
    |                                                ^
  7 |   const page = await browser.newPage();
  8 |   await page.setRequestInterception(true);
  9 |   page.on('request', (req) => {
    

webpack 5.89.0 compiled with 4 errors in 1353 ms

Did I do something wrong? Or is there any actual problem in the template? I have installed the typescript dependencies and tried again the same error persisted.

Thanks in advance.

4

Hi @saivignesh0303 :wave:

Could you please detail the steps you’ve followed to initialize your repo using the template, and let us know which commands you are running to reproduce this error?

Would you be able to provide us with an example file, which copied into a repo just started from the template would reproduce the error?

The reason I ask because in the example you’ve provided I see a lot of custom code, and reference to files I’m not familiar. It would be easier to debug from a fresh shared-state if possible.

Cheers :bowing_man:

5

I am working on a web application built using react and Typescript. They have already written jest-puppeteer test scripts for end-to-end testing that contain all the page flows. So I tried to use their script from the cloned k6-template-typescript folder test script where I call the page flows for load testing the page components. When I tried to do that I received the above error.

import {loginTest} from '../../src/e2e/helpers/flows/loginFlow'
import {Page} from 'jest-environment-puppeteer/node_modules/@types/puppeteer'
import {resetLocalStorage,setBasicPageInterceptions} from '../../src/e2e/helpers'

export const TEST_CLIENT_ID = 'baton-rouge';

let URL_TO_TEST = `https://localhost:3000?clientId=${TEST_CLIENT_ID}`;
let page: Page;

describe('e2e', () => {
  beforeEach(async () => {
    const incognitoContext = await browser.createIncognitoBrowserContext();
    page = await incognitoContext.newPage();
    await page.setRequestInterception(true);
    await resetLocalStorage(incognitoContext, URL_TO_TEST);
    setBasicPageInterceptions(page);
    try {
      await loginTest(page, URL_TO_TEST);
    } catch (err) {
      console.error(err);
      if ((err as Error)?.message?.includes('net::ERR_CONNECTION_REFUSED'))
        throw new Error(`An error occurred: ${err}. \nIs the dev server running?`);
      else throw new Error(`An error occurred during the loginTest: ${err}`);
    }
  });
  afterEach(() => {
    page.removeAllListeners();
  });
 
})

This is the script from where I try to call the other page flow scripts. The loginTest I imported in the first line contains the flow script for login functionality. Likewise the third import statement. Is it possible to do like this? Can I call other typescript components from k6-template-typescript?