Blog logotrial and stderr

New Job


I got a new job as an OpenMRS implementer / general tech guy for CompaƱeros en Salud, aka Partners in Health Mexico. You're gonna start seeing posts about OpenMRS and Java development. Be warned.

I've also finally ditched Satan and come back to Linux/Ubuntu. It's not Arch or anything, but there's certainly some hilarity to be shared here.

Managing Global Styles with styled-jsx


There's a bug, it might exist in styled-jsx but it certainly exists in styled-jsx as used by nextjs, where you can't have multiple <style jsx global> tags -- only the first one gets used. A nice, not very hacky solution, (assuming you're using inline-loader or raw-loader for CSS):

// global-styles.js
import foo from 'foo/style.css'
import bar from 'bar/style.css'
export default foo + bar
import GlobalStyles from './global-styles'
// in component
<style global jsx>{ GlobalStyles }</style>

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.