React, how to test with typescript + mocha + enzyme?

M

Mariik2019-06-09 20:02:38

JavaScript

Mariik, 2019-06-09 20:02:38

Hello. Or maybe someone can share with me a starter kit or a boilerplate for such testing? By itself, mocha is quite easy to set up, but with the typescript everything somehow becomes sad ... then the import of modules is covered, then the --watch mode in the mocha falls off ...
In general, I will be grateful for any advice. Just in case, here's what I've already figured out:

// package.json

"test": "mocha -w -r ts-node/register -r babel-register.js -r ignore-styles -r setup.js src/tests/*.spec.tsx",

// babel-register.js

require("@babel/polyfill");
require("@babel/register")({
    ignore: [
      /node_modules\/(?!(ol)\/)/
    ],

    presets : ["react-app","@babel/preset-typescript"],
    plugins : [
        "inline-react-svg",
        "@babel/preset-typescript"
    ],
    extensions: [".es6", ".es", ".jsx", ".js", ".mjs", ".tsx"],
    cache: false,
  });

// babel-config
module.exports = function (api) {
    //we will keep here all the supplementary babel options
    api.cache(false); 
    return {
        "env": {
            "test" : {
              "compact": false
            }
          }
    }
};

// setup.js
const { JSDOM } = require('jsdom');

const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;

function copyProps(src, target) {
  const props = Object.getOwnPropertyNames(src)
    .filter(prop => typeof target[prop] === 'undefined')
    .reduce((result, prop) => ({
      ...result,
      [prop]: Object.getOwnPropertyDescriptor(src, prop),
    }), {});
  Object.defineProperties(target, props);
}

global.window = window;
global.document = window.document;
global.window.requestAnimationFrame = (cb) => {
  return setTimeout(cb, 0);
};
global.window.cancelAnimationFrame = (cb) => {
  return setTimeout(cb, 0);
}
global.navigator = {
  userAgent: 'node.js',
};
copyProps(window, global);