Preact-cli: Any official way of handling tests in preact-cli?

[paweljedrzejczyk]

Hi!

Is there any official and easy way of handling tests?
Create-react-app has Jest framework integrated with some additional config that we can extend in package.json or setupTests.js file.

Does preact-cli plan to have something like it?

[lukeed]

Hi, yes! We're planning on getting this out asap. It may be as early as the next 1.5.0 release or get pushed back to 2.0 -- but it's definitely something we want in soon.

[developit]

I think we could get it into a 1.5, seems like we're set on it being a thin wrapper/runner around Jest.

[marcodeltongo]

Jest + https://github.com/bruderstein/unexpected-preact would be a match made in heaven. 😍

[fokusferit]

Hi everyone,

as this task of having a testing environment setup was important for a project so I tried to get Jest + preact-render-spy (but you could use any library) up and running.

I've created a Gist with the steps I did https://gist.github.com/fokusferit/5507f084b8414af7b03c31f4bffd7536.

Currently it is still a WIP solution but the things I did:

1. Wrote a transform Function for Jest which gets the babelConfig.js file from the preact-cli and returns a new transformer function for Jest based on babel-jestand the preact-cli config

const babelJest = require('babel-jest');

const preactCLIBabelRC = require('preact-cli/lib/lib/babel-config.js');

const transformer = () => {
    let babelConfig = preactCLIBabelRC.default('test', { modules: 'commonjs' } );
    // ToDo: Remove parts of it
    return babelJest.createTransformer(babelConfig);
};

module.exports = transformer();

1. Transform the webpack configuration to a Jest config based on the tutorial of https://facebook.github.io/jest/docs/en/webpack.html#content and the preact-boilerplate configuration.

-> It works.

I'm sure there is room for improvement but maybe as a workaround solution currently it works fine. I'm only doing functional tests, e.g. shallow and deep renderings of my components and check them so nothing related to PWA specific things.

I think for the cli itself preact test only supporting Jest and creating the configuration in the package.json + fixing the a possible caching issue for custom transform functions (here) would be already a great addition 😄

[reznord]

@fokusferit thanks for trying this out. 🙏

In the next version of preact-cli we are moving away to custom-templates. The main advantage of this is the user can clone any repo from github. It needs to have a specific folder template in which the entire code for the app is placed.

So, you can go ahead and create a custom-template with this setup which supports jest for tests, I can add that repo to the wiki page (yet to be created) which will have list of the custom templates which the user can use.

[fokusferit]

@reznord great to know!

I will create such a template and post it here afterwards.

[tomasswood]

@fokusferit I'll be interested to see what you have come up with, once you do it and post it.

[fokusferit]

I've created a PR for the default template https://github.com/preactjs-templates/default/pull/10 feel free to comment or try the default template on my fork (as a beta test).

I don't know if it is preferred to have this in the default template (I would but tbd) 😄