feat: TSX/JSX support

[kirkstrobeck]

Node.js version

v18.12.1

NPM version

8.19.2

@checkly/cli version

4.2.0

Steps to reproduce

Import a tsx file

What is expected?

Handle the tsx file or say that tsx is invalid

What is actually happening?

npx checkly test -e ENVIRONMENT_URL=https://[url]
 ›   Warning: checkly update available from 4.2.0 to 4.4.0.
Parsing your project... !
    Error: Encountered an error parsing check files for /Users/[path]/tests/test.spec.ts.

    The following dependencies weren't found:
    	/Users/[path]/src/components/[tsx-filename]

Any additional comments?

No response

[tnolet]

Hey @kirkstrobeck thanks for reporting.

1. Why are you importing a tsx file into your checkly CLI config? Just want to know your use case.
2. Can you share some example code?

[kirkstrobeck]

I had a test, foo.spec.ts and it was importing a file, shared.tsx, that had a value I wanted to assert in an expect.

Examples

// shared.tsx
const base = {
  greeting: <>Hey there<br />Bob</>,
  greetingButtonText: 'Hey there',
};

export default base;

// foo.spec.ts
import { test } from '@playwright/test';
import base from './shared';

test('button text matches shared.tsx greetingButtonText', async ({ page }) => {
  // Navigate to the page where the button is located
  await page.goto('YOUR_PAGE_URL');

  // Locate the button by a selector (update the selector as per your HTML structure)
  const buttonText = await page.textContent('SELECTOR_FOR_YOUR_BUTTON');

  // Assert that the text of the button matches greetingButtonText from shared.tsx
  test.expect(buttonText).toBe(base.greetingButtonText);
});

[tnolet]

@kirkstrobeck I see! As it's just a text based dependency, not some NPM package or large binary file, I think that would be possible.

[tnolet]

@kirkstrobeck do you expect the .tsx file to be compiled? As that would be more of an edge case to support.

[tnolet]

@kirkstrobeck just bumping this question. Importing .tsx is not something we can directly support as it requires a extra parsing. Shall we turn this into a feature request?

[kirkstrobeck]

I would expect it to warn properly. Something like “You’re trying to import a .tsx file, which is not supported.” Should also handle any other unexpected file extensions.

[sorccu]

Hi @kirkstrobeck, it has been quite a while to say the least, but we've been working on some related enhancements, and with some additional effort it might finally be possible to add support for .tsx/.jsx files too. Is this use case still relevant for you?

[kirkstrobeck]

Thanks for reaching out -- I don’t necessarily need support (would like it), just would prefer a nice warning as the message as one mentioned above is otherwise unclear

[case]

Adding my +1 for supporting tsx as an alternative to ts-node here.