> trial and stderr

Documentation pet peeve


When you find some specific, deeply-buried page of documentation with Google, but an alert tells you "you're not looking at the latest version of the docs!" and then you click it and it takes you to the docs homepage.

I'm looking at you, ElasticSearch, and Bootstrap 4 until like two weeks ago.

Enums in React

 •  Filed under react, javascript

I wrote a component that held an Enum, made in the popularly-recommended fashion, as state:

const MyEnum = Object.freeze({
    FOO: Symbol('foo'),
    BAR: Symbol('bar'),

class MyThing extends Component {
  constructor(props) {
    this.state = { enumValue = MyEnum.FOO }
  render() {
      this.state.enumValue === MyEnum.FOO ?
        <p>I pity the foo</p> :
        this.state.enumValue === MyEnum.BAR ?
          <p>I pity the bar</p> :
          <p>I pity myself</p>

and suddenly my app was breaking on hot-reloads, and I had written pitiably broken code! It seemed like the state was somehow becoming invalid whenever a hot reload happened.

This is because the hot reloader preserves the state, but every time the component is reloaded, our ES6 engine generates a new unique value for each Symbol, so the comparison this.state.enumValue === MyEnum.FOO is comparing an old value of MyEnum.FOO to the current one, yeilding false. So use an enum with deterministic values, like, say,

const MyEnum = Object.freeze({
    FOO: Symbol.for('foo'),
    BAR: Symbol.for('bar'),

My app is not a dumping ground for your one-night project libraries

 •  Filed under nodejs

All these devs like "oh, if you're using X and Y, you should really use my X-and-Y-plus-Z integration plugin, which mitigates some bugs in X that I could have fixed, but didn't, instead opting to create more bugs with this library I wrote one night after slamming four manhattans and going home alone"

Testing NextJS getInitialProps with Enzyme

 •  Filed under nextjs, enzyme, react

If you're using NextJs, you probably want to test getInitialProps on your pages. You can call it from your un-instantiated imported class, and use the props it returns to instantiate an Enzyme wrapper. Here's a nice little pattern:

import { shallow } from 'enzyme'
import MyPage from '../components/my-page'

describe('My Page', () => {
  var wrapper
  beforeEach(async () => {
    const props = await MyPage.getInitialProps()
    wrapper = shallow(<MyPage {...props} />)

Getting set up to test React

 •  Filed under react, testing

There's a bunch of guides telling you how to do this painful-looking JSDOM setup stuff. You probably don't need it. Use Enzyme's shallow rendering, which doesn't require a DOM to mount on. As this smart guy suggests, you can call lifecycle methods yourself to emulate mounting.

This is the best practices guide you're looking for.

Check out this mess of test boilerplate. This looks awful. Don't do it. You don't need it.

Reminder to Mongoose users who like their sanity

 •  Filed under mongoose

var schema = new Schema({..}, { bufferCommands: false })

Without this, uses of Mongoose models will fail silently and hang forever. The deepest programmer hell. Set bufferCommands to false when definining your schema so that using a Mongoose model when no mongo connection exists will produce logs. It will still hang forever. I'm not sure Mongoose provides a way to avoid that.

Reactstrap and React 16

 •  Filed under react

Starting a new NextJS project, I was getting errors like

TypeError: Cannot read property 'toLowerCase' of undefined
  at ReactDOMServerRenderer.renderDOM (/Users/bistenes/Code/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:2776:27)


Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

which were obviously totally irrelevant to the actual problem. Turns out Reactstrap <5.0 is incompatable with React 16.

npm i --save reactstrap@next fixed it.