Richard Scarrott richardscarrott

## !react-enzyme-render-methods.md

      
              4 files
            
          
              8 forks
            
          
              0 comments
            
          
              17 stars
            
          
                richardscarrott
                / !react-enzyme-render-methods.md
            
            
              Last active Sep 9, 2020
            
              
                react-enzyme - `shallow` vs `mount` vs `render` lifecycle methods
              
          
      View !react-enzyme-render-methods.md
  
    
    An exploration of the different render methods available in react-enzyme.

  
## server.js
const express = require('express');

console.log(process.version);

const app = express();

app.get('/hello', (req, res) => {
  console.log('HANDLING REQUEST');
  res.setHeader('content-type', 'application/json');
  res.flushHeaders(); // `flushHeaders` to prevent http client from retrying and therefore invoking this handler multiple times.

## box.css
.box {
	display: block;
	background: red;
	width: 200px;
	height: 200px;
	opacity: 1;
}

.box-hidden {
	display: none;

## benchmark.js
// Originally from fast-memoize; updated to include `mem` and test multiple and non-primitive arguments.

const ora = require("ora");
const Table = require("cli-table2");
const debug = require("logdown")();
const lruMemoize = require("lru-memoize").default;
const iMemoized = require("iMemoized");
const Benchmark = require("benchmark");
const underscore = require("underscore").memoize;
const lodash = require("lodash").memoize;

## test.js
const work = () => {
  for (let i = 0; i < 1000000; i++) {}
};

const start = process.hrtime.bigint();
work();
const end = process.hrtime.bigint();
console.log(
  `Benchmark took ${Number(end - start) / 1000 / 1000 / 1000} seconds`
);

## closest.ts
const closest = (values: number[], val: number) => {
  if (!values.length) {
    throw new VError(
      { info: { values, val } },
      'Expected values to contain at least one value'
    );
  }
  return values.reduce(
    (acc, currVal) =>
      Math.abs(acc.delta) > Math.abs(currVal - val)

## index.js
// node --max-old-space-size=100  --expose-gc index.js

const prettyBytes = require('pretty-bytes');

const forceGC = () => {
    if (global.gc) {
        global.gc();
    } else {
        console.warn('No GC hook! Start your program as `node --expose-gc file.js`.');
    }

## Button.jsx
const Button = ({ tagName: TagName = 'button', ...rest }) => <TagName className="button" {...rest} />;

const App = () => {
  return (
      <>
         <Button onClick={() => console.log('clicked')}>renders HTMLButtonElement (default)</Button>
         <Button tagName="a" href="http://google.com">renders HTMLAnchorElement (for functional purposes)</Button>
         <Button tagName="h3">renders HTMLHeadingElement (for weird SEO purposes)</Button>
      </>
  );

## index.html
<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <style>
            * {

## react-loadable
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

exports.default = Loadable;
	const express = require('express');

	console.log(process.version);

	const app = express();

	app.get('/hello', (req, res) => {
	console.log('HANDLING REQUEST');
	res.setHeader('content-type', 'application/json');
	res.flushHeaders(); // `flushHeaders` to prevent http client from retrying and therefore invoking this handler multiple times.
	.box {
	display: block;
	background: red;
	width: 200px;
	height: 200px;
	opacity: 1;
	}

	.box-hidden {
	display: none;
	// Originally from fast-memoize; updated to include `mem` and test multiple and non-primitive arguments.

	const ora = require("ora");
	const Table = require("cli-table2");
	const debug = require("logdown")();
	const lruMemoize = require("lru-memoize").default;
	const iMemoized = require("iMemoized");
	const Benchmark = require("benchmark");
	const underscore = require("underscore").memoize;
	const lodash = require("lodash").memoize;
	const work = () => {
	for (let i = 0; i < 1000000; i++) {}
	};

	const start = process.hrtime.bigint();
	work();
	const end = process.hrtime.bigint();
	console.log(
	`Benchmark took ${Number(end - start) / 1000 / 1000 / 1000} seconds`
	);
	const closest = (values: number[], val: number) => {
	if (!values.length) {
	throw new VError(
	{ info: { values, val } },
	'Expected values to contain at least one value'
	);
	}
	return values.reduce(
	(acc, currVal) =>
	Math.abs(acc.delta) > Math.abs(currVal - val)
	// node --max-old-space-size=100 --expose-gc index.js

	const prettyBytes = require('pretty-bytes');

	const forceGC = () => {
	if (global.gc) {
	global.gc();
	} else {
	console.warn('No GC hook! Start your program as `node --expose-gc file.js`.');
	}
	const Button = ({ tagName: TagName = 'button', ...rest }) => <TagName className="button" {...rest} />;

	const App = () => {
	return (
	<>
	<Button onClick={() => console.log('clicked')}>renders HTMLButtonElement (default)</Button>
	<Button tagName="a" href="http://google.com">renders HTMLAnchorElement (for functional purposes)</Button>
	<Button tagName="h3">renders HTMLHeadingElement (for weird SEO purposes)</Button>
	</>
	);
	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<style>
	* {
	"use strict";

	Object.defineProperty(exports, "__esModule", {
	value: true
	});

	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

	exports.default = Loadable;