Test errors since version 1.10.0

[HiDeoo]

• downshift version: 1.10.0+
• node version: 8.4.0
• npm (or yarn) version: yarn 1.1.0

What you did:

I'm running into some issues with Downshift while testing components using it with Jest & Enzyme (React 16).

What happened:

The error reported doesn't give much details beside RangeError: Invalid string length after hanging for a while.

RangeError: Invalid string length

      at Object.test (src/SelectField.test.js:17:52)
          at Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

Problem description:

I've found this related Jest issue but it doesn't give much indications on what would be the cause of that potential "out of memory" issue.

After different tests, I've managed to find out that tests don't fail when using Downshift v1.9.1 but starts when using v1.10.0. I've tried v1.10.1 (with the ssr fix) & 1.11.0, all fails for me.

Reproduction repository:

I've setup a small repro using create-react-app and a simplified version of one of my component and with v1.10.0+ a simple test would fail like:

test('should render properly', () => {
  const component = mount(<SelectField items={['test', 'test2']} placeholder="Choose" />)

  expect(toJSON(component)).toMatchSnapshot()
})

Cloning the repro repository and running yarn run test would work fine for me as Downshift v1.9.1 is specified as a dependency.

Running yarn upgrade downshift@1.11.0 and then yarn run test would lead to the issue I described above.

I'm not really sure where the issue is coming from, Downshift, Jest, Enzyme but as everything works fine using Downshift v1.9.1 I thought it would be best to start here.

[kentcdodds]

Hi @HiDeoo, thanks for the issue! Huh, that's odd. I'm not sure what's going on, but if you or anyone else figures it out then I'd appreciate a pull request to fix it :)

[HiDeoo]

I'm closing this issue as after some investigation this may be a bug in Jest pretty-format when using window as a prop.

I've created an issue on their Github with a new small repro and in the meantime my current workaround is to mock window and adding a toJSON() method to it to short-circuit pretty-format and avoid using their internal printComplexValue() which leads to this error.

Thanks for your amazing work on Downshift.

[natenorberg]

@HiDeoo, how do you mock the window object in the test? I had added

window.toJSON = () => ({});

and that seemed to work, but I'm updating to Jest 22 now and it's failing again.

[HiDeoo]

@natenorberg I removed all my mocks regarding this issue when updating to Jest 22. I've reported the issue with a repro on the Jest repo and it has been fixed since then, fix available in Jest 22.

So if it's the exact same issue, you shouldn't have to do anything special to no get this error, just remove your mock.

Regarding my mock, I was mocking global.toJSON which should be the same as window.toJSON and I think in my case I was returning a string for convenience but it shouldn't matter I guess.

[natenorberg]

Hmm, ok. I guess I must have a slightly different issue then, or else Jest 22 is causing something else to hang. I'll keep digging in. Thanks for your fix!

[HiDeoo]

Yeah, I'm gonna assume it must be slightly different.

I also have some issues with Jest 22, I'm guessing due to the internal jsdom update, specially when doing some canvas related tests, I'll have to keep digging too.

[natenorberg]

Yeah we had some issues with the new jsdom as well. This is the last thing on my list 😅

[kentcdodds]

Actually, if you're talking about what I think you're talking about, I just had a pill request merged into jest that fixes it. We just need to wait for a release 😀

[natenorberg]

This one? jestjs/jest#5227

Was that fixing something that could cause snapshots to hang?

[kentcdodds]

That's the pull request, but didn't fix that at all.

[jasonrhodes]

Was seeing this also on Jest 21.2.1, Downshift 1.22.1

Upgrading to Jest 22.1.4 fixed for us. 👍

Even this simple example was hanging/exploding on Jest 21:

import React, { Component } from 'react';
import Downshift from 'downshift';

export default class Typeahead extends Component {
  render() {
    return <Downshift />;
  }
}

// test
import React from 'react';
import { shallow } from 'enzyme';
import Typeahead from '../Typeahead';

describe('Component: Typeahead', () => {
  it('should render ok by default', () => {
    const wrapper = shallow(<Typeahead />);
    expect(wrapper).toMatchSnapshot();
  });
});

result:

 FAIL  src/pages/reports/components/tests/Typeahead.test.js (15.016s)
  Component: Typeahead
    ✕ should render ok by default (14750ms)

  ● Component: Typeahead › should render ok by default

    RangeError: Invalid string length

      at Object.it (src/pages/reports/components/tests/Typeahead.test.js:16:21)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)