preactjs / jest-preset-preact Goto Github PK

I get the error below if I try to render a <></> whereas <Fragment><Fragment /> seems to be working just fine.

ReferenceError: Fragment is not defined

You can access my template with healthy test for re-production. I hope I'm just missing something 🤔

Note that Typescript version is ^4.2.4 and no custom .babelrc is involved.

Not sure why we don't use the automatic JSX transform, so that don't need to add import {h, Fragment} from 'preact' at every component that needs JSX or Fragment.

From

[
  '@babel/plugin-transform-react-jsx', {
    "runtime": "automatic"
    },
]

Running npm test for a stateful component, after updating to latest versions (listed below), throws an exception. However the error disappears if downgrading jest-preset-preact to v1.0.0.

Repro steps

1. Install latest preact-cli.

2. Create a new preact app using default template.

$ preact create default my-project

1. Modify src/components/header/index.js to a stateful component:

import { h, Component, render } from 'preact';
import { Link } from 'preact-router/match';
import style from './style.css';

export default class Header extends Component {
  state = {
    title: 'Preact App'
  };

  render(_, {title}) {
    return (
      <header class={style.header}>
        <h1>{title}</h1>
        <nav>
          <Link activeClassName={style.active} href="/">Home</Link>
          <Link activeClassName={style.active} href="/profile">Me</Link>
          <Link activeClassName={style.active} href="/profile/john">John</Link>
        </nav>
      </header>
    );
  }
}

1. Run npm test and it works fine.

2. Now Update lib versions to latest (only updated ones shown):

  "devDependencies": {
    "enzyme": "^3.11.0",
    "enzyme-adapter-preact-pure": "^2.2.1",
    "jest": "^26.2.2",
    "jest-preset-preact": "^4.0.0",
  },
  "dependencies": {
    "preact": "^10.4.6",
  },

1. Running npm test results in an exception:

 FAIL  tests/header.test.js
 Test suite failed to run

    SyntaxError: pwa-test/src/components/header/index.js: Missing class properties transform.
      4 | 
      5 | export default class Header extends Component {
    > 6 |   state = {
        |   ^
      7 |     title: 'Preact App'
      8 |   };
      9 | 

      at File.buildCodeFrameError (node_modules/@babel/core/lib/transformation/file/file.js:248:12)
      at NodePath.buildCodeFrameError (node_modules/@babel/traverse/lib/path/index.js:144:21)
      at pushBody (node_modules/@babel/plugin-transform-classes/lib/transformClass.js:161:20)
      at buildBody (node_modules/@babel/plugin-transform-classes/lib/transformClass.js:135:5)
      at classTransformer (node_modules/@babel/plugin-transform-classes/lib/transformClass.js:544:5)
      at transformClass (node_modules/@babel/plugin-transform-classes/lib/transformClass.js:580:10)
      at PluginPass.ClassExpression (node_modules/@babel/plugin-transform-classes/lib/index.js:63:54)
      at newFn (node_modules/@babel/traverse/lib/visitors.js:175:21)
      at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:55:20)
      at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:42:17)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.501 s

The code runs fine when building for dev, however when running tests on a project using react-bootstrap at version 2.0.0-beta.4, they fail with TypeError: Cannot read property 'current' of undefined. The following output is from creating a default application app with create-preact-app, adding [email protected], adding a component to the header file and running tests, see repro here :

>npm run test

> [email protected] test
> jest

 FAIL  tests/header.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'current' of undefined

      2 | import { Link } from "preact-router/match";
      3 | import style from "./style.css";
    > 4 | import { Container } from "react-bootstrap";
        | ^
      5 |
      6 | const Header = () => (
      7 |   <Container>

      at jsxDEV (node_modules/react/cjs/react-jsx-runtime.development.js:860:73)
      at jsxWithValidation (node_modules/react/cjs/react-jsx-runtime.development.js:1155:19)
      at jsxWithValidationDynamic (node_modules/react/cjs/react-jsx-runtime.development.js:1209:12)
      at Object.<anonymous> (node_modules/react-bootstrap/cjs/Carousel.js:57:46)
      at Object.<anonymous> (node_modules/react-bootstrap/cjs/index.js:69:40)
      at Object.<anonymous> (src/components/header/index.js:4:1)
      at Object.<anonymous> (tests/header.test.js:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.873s
Ran all test suites.
Exception: npm exited with 1
[tty 17], line 1: npm run test

when is the release with jest 29 support planned 0 its already in master ?

Currently, the test suite on the PreactJS Typescript Template fails to run. Raised Issue 1, Raised Issue 2.

While a few people were suggesting to re-add ts-jest and have it handle TSX, I noticed ts-jest was actually removed from the template with an update to its testing infrastructure, so that shouldn't actually be the issue. Doing a bit more digging and I found that the test suite on the template runs fine for CLI versions before v3.0.0-rc.15, which is when this library was separated out.

It looks like, at the time, this preset extended the config in the CLI which happened to pull in and apply the @babel/preset-typescript. But with this moving out, that is no longer the case.

It seems that adding that back into jest-preset-preact fixes the test suite issues and does not impact non-TS projects, but there might be a reason not to do this. Regardless, I'll make a quick little PR for this fix.

I think I setup something wrong. I created the project using Vite and using this template.

Steps to reproduce

1. Set up an async test
2. Try to run test with jest command

Expected Behavior

Tests should run fine.

Actual Behavior

This error. ReferenceError: regeneratorRuntime

Note

I tried to use babel and add configuration file and tried to install regenerator-runtime. They do nothing.

Edit 1: I need to import regenerator-runtime manually. Actually, I expect that it should work without manual import.