Tests for Default template do not work

** 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 preact-cli@3.0.0-rc.1 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.

[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

> test-preact@0.0.0 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

> test-preact@0.0.0 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

> test-preact@0.0.0 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”.

> test-preact@0.0.0 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