Setting up tests with preact-cli project

[01binary]

Is there an article on setting this up with preact-cli created project? I have no doubt you are very busy so I will keep hacking, but if you know what's happening please let me know.

TL;DR: yarn && yarn test on my branch

$ mocha --recursive --require babel-polyfill --compilers js:babel-register

Gets me:

SyntaxError: d:/Desktop/ultravest-assistant/test/state/Component.tests.js: Unexpected token (12:9)
  10 |  it('any test that uses JSX', () => {
  11 |          // following taken from preact-jsx-chai readme
> 12 |          expect(<div id="1">a</div>).to.eql(<div id="1">a</div>);
     |                 ^
  13 |  });
  14 | });

I have some other tests that don't use JSX and work. I ended up putting babel "env" preset into my package.json because I go to extreme lengths to keep my package root clean, but doing the same with .babelrc didn't make any difference. My package is customized from what preact-cli did, in an attempt to get tests to work:

{
  "name": "ultravest-assistant",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "lint": "eslint src",
    "test": "mocha --recursive --require babel-polyfill --compilers js:babel-register",
    "start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev",
    "build": "lint && preact build",
    "serve": "preact build && preact serve",
    "dev": "preact watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "eslintConfig": {
    "extends": "eslint-config-synacor"
  },
  "babel": {
    "presets": [ "env" ]
  },
  "devDependencies": {
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-register": "^6.26.0",
    "chai": "^4.1.2",
    "eslint": "^4.6.1",
    "eslint-config-synacor": "^1.1.1",
    "if-env": "^1.0.0",
    "mocha": "^3.5.0",
    "preact-cli": "^1.4.1",
    "sass-lint": "^1.11.1"
  },
  "dependencies": {
    "node-sass": "^4.5.3",
    "preact": "^8.2.5",
    "preact-compat": "^3.17.0",
    "preact-jsx-chai": "^2.2.1",
    "react": "npm:preact-compat",
    "recompose": "^0.25.0",
    "sass-loader": "^6.0.6"
  }
}

I am confused because error message indicates it's getting transpiled through babylon but it's still unhappy.

[01binary]

I found the Nectarine project and used as example 🥇

"babel": {
    "presets": [ "env" ],
    "plugins": [
      [ "transform-react-jsx", { "pragma": "h" } ],
      "transform-decorators-legacy"
    ]
  },

Thanks!

[developit]

^ awesome! We're actually looking at shipping a Jest-based testing setup with preact-cli, and it would support both preact-jsx-chai and preact-render-spy.

[01binary]

I may have a better config now, I will post a link to sample project and my config in this thread

[01binary]

Here's my project, it's pre-CSS so the page doesn't look good yet, but it has Jest tests and preact-render-spy. It also uses Recompose, so it's got a fixture that helps test HOCs generated by that library.

https://github.com/01binary/ultravest-assistant

I think I found a good balance of testing state & mutators separately from state transforms and separately from UI:

• State and mutators are provided by Recompose as a HOC, so you can use basic Jest to test things like:
  • Is default state correct?
  • After this and that action, is the state correct?
  • Same if you opted for Redux, you would just test reducers separately
• State transforms can be basic functions or backed by Reselect, so you can use basic Jest tests to verify:
  • Is this function that's supposed to calculate full user name given first name and last name stored in app state returning the full name? What if either or both are undefined? etc
  • Is this function that's supposed to calculate user age given birthdate calculating the age correctly? What if the birthdate is out of range, could it return "300 years"? etc
• The high-level UI composition is tested with preact-render-spy:
  • Is this component including this other component? Because I don't want it to just render the right markup, I want that right markup to come from this other component.
• Lastly, the detailed UI tests use Jest snapshots. This is made especially easy by your use of identity-obj-proxy to resolve imported CSS classes during tests, because that just gives the class name instead of undefined or the hashed CSS name.
  • This is great for tests like "given this data, do I get this markup?" and "given no data, do I get this markup?", "given this other data with just some parts missing but not others, do I get this markup?", so you have just one shapshot for simple components that don't do much with their inputs, and more snapshots for components with many states.