Preact-cli: Tests for Default template do not work

[MarkGeeRomano]

** I'd post this in the templates repo but there is no issue section available.

Do you want to request a _feature_ or report a _bug_?
Bug
What is the current behaviour?
The npm test command fails for apps produced using the default template
If the current behaviour is a bug, please provide the steps to reproduce.
npm i -g [email protected]
preact create default foobar
npm test
output:

● Validation Error:

  Preset jest-preset-preact not found.

  Configuration Documentation:
  https://facebook.github.io/jest/docs/configuration.html

What is the expected behaviour?
Should run sample tests successfully.

Please mention other relevant information.
Even if I use the --config flag to point to the jest-preset-preact config file directly, it fails.

[harshitkumar31]

I could trace it to node_modules/jest-config/build/normalize.js

Not sure why it's only trying to resolve json file. I tried changing it to .js & it worked.
Probably @marvinhagemeister can shed some light on this.

[laszlocph]

I can confirm. :disappointed: Looks like it needs a newer Jest..

npm install jest-preset-preact                                                                                                                   
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.  

If I give the right version, it fails with:

    TypeError: createConfig is not a function
      at Object.<anonymous> (node_modules/jest-preset-preact/src/babel-jest.js:4:16)

[laszlocph]

It was working in https://github.com/preactjs-templates/default/commit/44d5aac09993cb70801d91d2225d156065e1e13e

Using the presets from package.json, copying the .bablerc file I could make it work in my project.

[scythianfuego]

it works with jest updated to latest version in package.json
"devDependencies": { ..., jest": "^24.9.0", ... }
npm i

[marvinhagemeister]

@scythianfuego Great detective skills! Can you file a PR? I'd be happy to merge it :+1:

[andreek]

I needed some more steps to get tests running with jest 24.9.0.

Update preact-cli to version v3.0.0-rc.4

> [email protected] test /test-preact
> jest

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

    TypeError: createConfig is not a function

      at Object.<anonymous> (node_modules/jest-preset-preact/src/babel-jest.js:4:16)
      at ScriptTransformer._getTransformer (node_modules/@jest/transform/build/ScriptTransformer.js:348:19)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:419:28)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:523:40)

After update to jest 24.9.0 I run into the problem that preact-cli babel-config does not exports a function directly. This can be solved with updating preact-cli to version v3.0.0-rc.4.

Change browser to "maintained node versions" in jest-preset-preact

> [email protected] test /test-preact
> jest

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

    BrowserslistError: [BABEL] /test-preact/tests/header.test.js: Unknown browser node (While processing: "/test-preact/node_modules/babel-preset-env/lib/index.js")

      at checkName (node_modules/babel-preset-env/node_modules/browserslist/index.js:112:20)
      at Function.select (node_modules/babel-preset-env/node_modules/browserslist/index.js:675:18)
      at node_modules/babel-preset-env/node_modules/browserslist/index.js:140:33
          at Array.reduce (<anonymous>)
      at resolve (node_modules/babel-preset-env/node_modules/browserslist/index.js:121:18)
      at browserslist (node_modules/babel-preset-env/node_modules/browserslist/index.js:217:16)
      at getTargets (node_modules/babel-preset-env/lib/targets-parser.js:103:63)
      at buildPreset (node_modules/babel-preset-env/lib/index.js:144:45)
      at node_modules/@babel/core/lib/config/full.js:167:14
      at cachedFunction (node_modules/@babel/core/lib/config/caching.js:33:19)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.818s
Ran all test suites.
npm ERR! Test failed.  See above for more details.
````

~~The next issue was ```browerlists``` doesn't know browser "node" anymore~~. I changed the config in ```babel-jest.js``` in ```jest-preset-preact``` to use "maintained node versions".

***Update***: This is because I don't have "node 10" installed. https://github.com/preactjs/preact-cli/pull/898#issue-323046105

### Minor changes to ```header.test.js``` and ```header/index.js```
```shell
> [email protected] test /test-preact
> jest

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

    Cannot find module './style' from 'index.js'

    However, Jest was able to find:
        './style.css'

    You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].

    See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

      1 | import { h } from 'preact';
      2 | import { Link } from 'preact-router/match';
    > 3 | import style from './style';
        | ^
      4 | 
      5 | const Header = () => (
      6 |       <header class={style.header}>

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)
      at Object.<anonymous> (src/components/header/index.js:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.809s, estimated 1s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

I've changed the import to "./style.css".

> [email protected] test /test-preact
> jest

 FAIL  tests/header.test.js
  Initial Test of the Header
    ✕ Header renders 3 nav items (1ms)

  ● Initial Test of the Header › Header renders 3 nav items

    ReferenceError: h is not defined

       6 | describe('Initial Test of the Header', () => {
       7 |      test('Header renders 3 nav items', () => {
    >  8 |              const context = shallow(<Header />);
         |                              ^
       9 |              expect(context.find('h1').text()).toBe('Preact App');
      10 |              expect(context.find(<Link />).length).toBe(3);
      11 |      });

      at Object.<anonymous> (tests/header.test.js:8:19)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.814s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

Solved with import { r } from preact in header.test.js.

[scythianfuego]

Well, I've created a pull request for templates repo with @andreek fixes
https://github.com/preactjs-templates/default/pull/31

As for style.css I think we should add 'css' to moduleFileExtensions in jest config here
https://github.com/preactjs/preact-cli/blob/2455618c20b58f385fcc0466d6f4de284947e4f1/packages/jest-preset-preact/src/config.js#L17
as mentioned here
https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

but as now it will create a dependency to preact-cli release that doesn't yet exist

[reznord]

Closing this since the tests in the default template were fixed in https://github.com/preactjs-templates/default/pull/31