Forem: Nico Amabile

What programming best practice do you disagree with?

Nico Amabile — Thu, 06 Jun 2019 23:57:00 +0000

I've been recently asked this question in an interview and this was my answer:

Pure unit tests and shallow rendering idea

For ReactJS in particular, there are many testing libraries that allow you to do shallow rendering (enzyme for example), that means that if you have a composed component, the test won’t actually render that inner component so you can’t make assertions on that. If you want to cover those internal components you need to write specific tests for each part.

For example:

<div>
   <Form>
      <Username />
      <Email />
   </Form>
</div>

With this structure, if you want to write a test for this component, the first div will be rendered but the custom Form component won’t, neither the Username and Email components, they will be mocked. You will have to test them individually, which follows the pure unit testing idea, but you can’t ensure that the components work ok together.
If you follow this pattern, you will soon end up with a set of pure unit tests that are really confusing and hard to follow.

// Detect dark theme var iframe = document.getElementById('tweet-965052178267176960-643'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=965052178267176960&theme=dark" }

Tests should resemble the way the software is used. Even though is not pure unit tests (technically you can call it integration test), at the end of the day the only thing that matters is that you can ship your app with confidence.

Resources:

Image by Gerd Altmannfrom Pixabay

Why you should cleanup after render

Nico Amabile — Tue, 28 May 2019 01:17:41 +0000

I spent some time today debugging a simple jest test with react-testing-library. I run into some issues and I couldn't easily figure out what was going on.

The problem

For a very simple component I had:

Snapshot test
Some basic interaction tests that work correctly only if I run them separately 😒

I created this example to illustrate the idea:



const Google = ({ onSubmit }) => {
  const [text, setText] = useState('')
  return (
    <Fragment>
      <input
        data-testid='textbox'
        type='text'
        value={text}
        onChange={({ target: { value }}) => setText(value)} />

        <button
          data-testid='btn'
          onClick={() => {
            if (text) {
              onSubmit(text)
              setText('')
            }
        }}>
          Search
        </button>
    </Fragment>
  )
}

And the tests:



import { render, fireEvent } from 'react-testing-library'

describe('Google tests', () => {
  test('It renders corectly', () => {
    const { container } = render(<Google />)
    expect(container.firstChild).toMatchSnapshot()
  })

  test('Search with empty value', () => {
    const onSubmit = jest.fn()
    const { container, getByTestId } = render(<Google onSubmit={onSubmit}/>)
    const button = getByTestId('btn')
    fireEvent.click(button)
    expect(onSubmit).not.toBeCalled()
  })

  test('Seach with valid value', () => {
    const onSubmit = jest.fn()
    const text = 'Example'
    const { container, getByTestId } = render(<Google onSubmit={onSubmit}/>)
    const textbox = getByTestId('textbox')
    fireEvent.change(textbox, { target: { value: text }})
    const button = getByTestId('btn')
    fireEvent.click(button)
    expect(onSubmit).toBeCalledWith(text)
  })
})

If I run this, I get this error:

Clearly, I was sending a function for that particular test ('Search with valid value'). Typo maybe? 🤔
My first reaction was to add .only to the test and focus on that particular problem. Guess what, it worked 😒

I spent some time debugging it until I realize that the failing test was using the component instance I created for the first snapshot test (the one that doesn't have the click handler) 🤯
How the hell did that happen?

From the official documentation:
"Failing to call cleanup when you've called render could result in a memory leak and tests which are not "idempotent" (which can lead to difficult to debug errors in your tests)."

The solution

It was as simple as using cleanup from 'react-testing-library'.



import { render, fireEvent, cleanup } from 'react-testing-library'

describe('Google tests', () => {
  beforeEach(cleanup)
  ...
})

Here you have a repl.it with the example.

Hopefully, this will save you some debugging time 👍

Photo by karatara from Pexels

React.Fragment, the only child

Nico Amabile — Sun, 21 Apr 2019 18:08:16 +0000

This is a short post about some issues I had while building a wizard component in ReactJS.

You can't reference a "falsy" child while using React.cloneElement.
React.Fragment returns a single child.

At the beginning my wizard instance looked something like this:

<Wizard>
  <Step1 />
  <Step2 />
  <Step3 />
  <Step4 />
  <Step5 />
</Wizard>

Behind the scenes, the component will only render the current step.

render () {
  const { children } = this.props
  const { activeStep } = this.state
  const extraProps = {...} // Some extra info I need on each step.
  return (
    …
    {React.cloneElement(children[activeStep], extraProps)}
    …
  )
}

Based on some business rules, I wanted to hide/show some steps, so my wizard instance will look something like this:

renderStep2 () {
  if (conditionForStep2) {
    return <Step2 />
  }
}
render () {
  return ( 
    <Wizard>
      <Step1 />
      {this.renderStep2()}
      <Step3 />
      {conditionForStep4 && <Step4 />}
      <Step5 />
    </Wizard>
  )
}

Those expressions evaluate to undefined for Step2 and false for Step4, and any of those values can be used as a valid child when doing React.cloneElement(children[activeStep], extraProps) where activeStep is the index of Step2 or Step4, React will complain 😩 and also my index will be wrong.

Instead of using children directly, I created a function that returns only the "truthy" steps:

const getChildren = children => children.filter(child => !!child)
And change my Wizard render function to something like this:
render () {
 const { children } = this.props
 const { activeStep } = this.state
 const filteredChildren = getChildren(children)
 return (
   …
   {React.cloneElement(filteredChildren[activeStep], extraProps)}
   …
 )
}

The first problem solved 🎉

I got to the point where I wanted to group some steps in order to simplify my logic. Let's say for example that I need to use the same condition for rendering Step3, Step4 and Step5, so I grouped them into a React.Fragment.

renderMoreSteps () {
  if (condition) {
    return (
      <Fragment>
        <Step3 />
        <Step4 />
        <Step5 />
      </Fragment>
    )
  }
}

And my Wizard instance:

<Wizard>
  <Step1 />
  <Step2 />
  {this.renderMoreSteps()}
</Wizard>

The problem: Even though Fragment is not represented as DOM elements, it returns a single child instead of individual child components.
The solution: flatten children.

import { isFragment } from 'react-is'
const flattenChildren = children => {
  const result = []
  children.map(child => {
    if (isFragment(child)) {
      result.push(…flattenChildren(child.props.children))
    } else {
      result.push(child)
    }
  })
  return result
}

Updated getChildren function:

const getChildren = children => flattenChildren(children).filter(child => !!child && !isEmpty(child))

For simplicity, I used react-is, but the implementation is straight forward:

function isFragment (object) {
  return typeOf(object) === REACT_FRAGMENT_TYPE
}
const REACT_FRAGMENT_TYPE = hasSymbol
  ? Symbol.for('react.fragment')
  : 0xeacb;
const hasSymbol = typeof Symbol === 'function' && Symbol.for;

I hope this helps!
All comments are welcomed.