Working with preact/compat

[whilelucky]

• preact-testing-library version: 1.0.2
• preact version: 10.4.4
• node version: 12.16.3
• npm (or yarn) version: yarn 1.22.4

Relevant code or config

// jest.config.js
moduleNameMapper: {
    '^react$': 'preact/compat',
    '^react-dom/test-utils$': 'preact/test-utils',
    '^react-dom$': 'preact/compat',
    '^@testing-library/react$': '@testing-library/preact',

What you did:
Tried to alias @testing-library/react to @testing-library/preact because we're aliasing react and react-dom to preact/compat.

What happened:
Fails with an error that it cannot find waitFor, but I also suspect there may be other differences in the api's of both the libraries.

Reproduction repository:

Problem description:
We'd like our jest tests to run against preact and not react as long as we are using the preact/compat alias so that we know our tests(and hence implementations) work in preact.

Suggested solution:
Firstly, update the @testing-library/dom package to the latest version, and secondly, match any other mismatches in the library apis.

[kentcdodds]

Cc @mihar-22, would you like some help with getting this project going again?

[mihar-22]

No problem @kentcdodds, I'll sort it out this weekend.

[kentcdodds]

If you'd like, using kcd-scripts helps several of the other packages not worry about keeping tooling up-to-date. I can help you get that added, or you can reference some of the other Testing Library packages to get an idea for how that works.

kcd-scripts has built-in support for preact. All you need to do is:

1. Have preact as a dep
2. Use the --p-react flag with the build script when bundling

I'd suggest the build here be similar to React Testing Library: https://github.com/testing-library/react-testing-library/blob/499cc0449b46421c922d81ade986cce7628a8d05/package.json#L12-L16

It'd probably be something like this:

    "prebuild": "rimraf dist",
    "build": "npm-run-all --parallel build:main build:bundle:main build:bundle:pure",
    "build:bundle:main": "dotenv -e .bundle.main.env kcd-scripts build -- --bundle --no-clean",
    "build:bundle:pure": "dotenv -e .bundle.main.env -e .bundle.pure.env kcd-scripts build -- --bundle --no-clean --p-react",
    "build:main": "kcd-scripts build --no-clean",

If you'd rather not use kcd-scripts that's totally fine too :)

[whilelucky]

Hey team, thanks for looking into this, I see a PR merged for kcd-scripts, does that mean it will be integrated into this library soon? or does that mean I can just directly use testing-library/react for preact too?

[mihar-22]

Hey @lakshyaranganath, I'm just some bouncing between different work at the moment. I'll dig into it now and see how it goes.

[whilelucky]

No problem, thanks @mihar-22. 👍

[mihar-22]

Migrating over to kcd-scripts causes ReferenceError: React is not defined when running tests and I can't find where it's coming from. The error is too obscure but points towards JSX usage. However, I debugged and kcd-scripts is correctly setting the JSX h pragma. I've been banging my head for the last hour.

The tests pass with the current build tools but I can't see any real difference between them and kcd-scripts. Do you have any idea why this might be happening @kentcdodds? It's all standard setup and I copied the react-testing-library to the tee. I added BUILD_PREACT=true to .bundle.main.env. I also added the following to the test command cross-env BUILD_PREACT=true kcd-scripts test.

[kentcdodds]

I have a feeling it should be Preact.h instead of React.h in the Babel config. You should be able to test that out locally.

[mihar-22]

Nah that can't be the issue because I don't have react installed so it's using the h pragma. I tested it anyway and it didn't work.

[mihar-22]

Lost my mind ... but I finally found it. It's this line in the Jest configuration transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$']. I don't exactly know why yet but it works once I remove it. The only 2 modules imported is @testing-library/jest-dom and preact. So not transpiling one of them is causing it.

Seems like preact needs to be transformed for it to all work.

[mihar-22]

Just a quick update. After playing around an hour in the morning and some more tonight I can't get kcd-scripts to work. Some reason when I add a custom .babelrc.js config I get the following error You must use the @babel/plugin-transform-runtime plugin when babelHelpers is "runtime". I checked everything and I have no idea why it's throwing it. The plugin is clearly installed and in the config file.

At this point I'm going to stop, probably tomorrow night I'll just whip together a Rollup config that mirrors @testing-library/react and go from there.

[whilelucky]

Hey, sounds like a plan :) And, thank you so much for the update, I really appreciate you taking your personal time to look into this. 🥇