the0neWhoKnocks

How to use a JS configuration when a module only accepts JSON

There are times when you're using a Node module that can only be configured via JSON. When it comes to comments or setting up dynamic behavior, JSON falls flat. This will describe how (with some slight alterations) to get the best of both worlds.

The examples demonstrate settings for nodemon within a monorepo.

• package.json - The watch:server command will first run conf.nodemon.js and then start up nodemon with the config that was generated.
• conf.nodemon.js - Defines the configuration for the module with any logic that needs to be applied, then writes it out

the0neWhoKnocks

Jest Testing Examples

• Common Use Cases
  • Testing a function was called with a specific Object property
  • Testing a function was called with a bound callback
  • Setting props on window.location
  • Working with History
  • Time travel
  • Testing exceptions
• Check if an Object contains multiple keys

the0neWhoKnocks

Working with Webpack

---

Configuration Notes

Filtering in CommonChunks

Imagine you're in a mono-repo and you want a majority of node_modules in a vendor bundle but all local repo modules to remain in the app bundle.

the0neWhoKnocks

module.exports = {
  env: {
    browser: true,
    es6: true,
    jest: true, // <-- important bit
    node: true,
  },
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 2019,

the0neWhoKnocks

Debugging React

Figure out what component Fiber has an issue with

Issue - After an upgrade to React 16 (from 15), we were seeing an error throw a warning message in regards to Warning: Did not expect server HTML to contain the text node " " in <div>.. Stepping through Fiber calls can be very time consuming and not very informative if you don't know where to look.

Solution - Do a source-search in Chrome DevTools for reconcileChildFibers, place a breakpoint in there, and add a Watch for newChild.type.name. Then you can just step through as it iterates the components and you can easily read which

the0neWhoKnocks

Enzyme Testing

http://airbnb.io/enzyme/docs/api/

---

How to test a nested component when using shallow

There are cases, where you may have a connected component, or you've had to wrap a component for one reason or another. Using shallow instead of mount has less overhead, but you can't use find since it's only one level deep. That's where dive comes in. Imagine you have a component like this

the0neWhoKnocks

Javascript Snippets

• Pad a string with a token
• Formatting a timestamp
• Convert a String to Camelcase
• Convert a String to Pascalcase
• Convert a String to Kebabcase
• Convert Hex to RGB
• Convert RGB to Hex
• Random Number Within Range

the0neWhoKnocks

Debugging Jest tests in a MonoRep with VSCode

If you're writing unit tests, there will be times when the ability to debug specific tests will come in handy. This is how you set up a debugging profile for VSCode.

---

Set up VSCode

At the root of your repo create a .vscode folder, and dump these files in it:

the0neWhoKnocks

Storybook How-To

---

Custom Decorators

There are times when you'll want to wrap your stories with specific styling or knob data; this is a simple example of how to to do that.

the0neWhoKnocks

Using React-Intl

---

Setup

import { IntlProvider, addLocaleData, injectIntl } from 'react-intl';
import App from './app';