Mount not working (RangeError: Invalid string length)

[alexmarles]

Hi everyone,

maybe I am missing something essential, but I am trying to use mount for some testing and it is just not working. These are my Jest and Enzyme versions:

"enzyme": "^2.9.1",
"jest": "^20.0.4",

I have tried in different types of components and even in the simplest one I came up to, it still not works. This is the component code:

import React, { Component } from 'react'

class Simple extends Component {
  render () {
    return (
      <div>
        <p>This is simple</p>
      </div>
    )
  }
}

export default Simple

And this is the test I wrote for it:

import React from 'react'
import { mount } from 'enzyme'

import Simple from '../../src/js/components/Simple'

test('Simple component renders', () => {
  let wrapper = mount(<Simple />)
  expect(wrapper).toMatchSnapshot()
})

And the output I get is this:

FAIL  __test__/components/Simple.test.js (26.302s)
  ● Simple component renders
    RangeError: Invalid string length
      
      at Object.<anonymous> (__test__/components/Simple.test.js:8:19)
      at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
      at process._tickCallback (internal/process/next_tick.js:109:7)

I googled this error and the only thing I found is that it might be some out of memory problem, and that is why I tried it with a really simple component, but still it doesn't work. I have tested this in Ubuntu and Mac OS X, both with the same results.

Thanks in advance for those who can help me with it!

[alexmarles]

Ok, my bad.

What is really not working in the example is mounting a component with Enzyme and trying to test it with the Jest's Snapshot Testing right away. Components must be converted to Json for them to be stored and compared as snapshots.

Best way to do it would be using enzyme-to-json to transform mounted components to JSON:

import toJson from 'enzyme-to-json'

...

expect(toJson(wrapper)).toMatchSnapshot()

If you don't want to write toJson every time, you can import its serializer and add it to expect:

import serializer from 'enzyme-to-json/serializer';

expect.addSnapshotSerializer(serializer)

...

expect(wrapper).toMatchSnapshot()

You can also keep using Jest's own renderer, but you'll be missing all the Enzyme's features related to the component management.

Closing this, thanks!

[tsneed290]

Is anyone still seeing this issue even after leveraging enzyme-to-json?

[alexmarles]

@tsneed290 Not me, it works perfectly. Make sure you are using one of the serializations after importing the library, either using the toJson method or adding the serializer to expect

[DhawalRank-zz]

I am still having it. I can see the wrapper in console with debug() getting mounted perfectly but when I use toMatchSnapshot(), it fails with invalid string length error. I tried using enzyme-to-json but still it gives the same error. render() works fine but as I want to use find() and simulate(), mount() is the only option.

[schtauffen]

I am also seeing this:

RangeError: Invalid string length
at printListItems (node_modules/pretty-format/build/collections.js:174:256)
at printComplexValue (node_modules/pretty-format/build/index.js:214:37)
at printer (node_modules/pretty-format/build/index.js:334:10)
at printObjectProperties (node_modules/pretty-format/build/collections.js:179:21)
at printComplexValue (node_modules/pretty-format/build/index.js:253:42)
at printer (node_modules/pretty-format/build/index.js:334:10)
at printListItems (node_modules/pretty-format/build/collections.js:174:258)
at printComplexValue (node_modules/pretty-format/build/index.js:214:37)
at printer (node_modules/pretty-format/build/index.js:334:10)
at printObjectProperties (node_modules/pretty-format/build/collections.js:179:21)
at printComplexValue (node_modules/pretty-format/build/index.js:253:42)
at printer (node_modules/pretty-format/build/index.js:334:10)
at printListItems (node_modules/pretty-format/build/collections.js:174:258)
at printComplexValue (node_modules/pretty-format/build/index.js:214:37)
[sic]

versions:

    "enzyme": "3.3.0",
    "enzyme-adapter-react-16": "1.1.1",
    "enzyme-to-json": "3.3.1",
    "jest": "22.1.4",

[ljharb]

@schtauffen what is "pretty-format"? It seems like it's not an enzyme bug.

[schtauffen]

@ljharb it is a jest dependency.
There is some issue with the contract between enzyme/enzyme-to-json/jest but unfortunately I don't really know more at the moment to help determine where exactly the issue lies.

I've just written tests that don't use toMatchSnapshot in the cases it was failing, for now. I will try to contribute more information in the applicable repo if I find anything which leans one way or the other.

[ljharb]

enzyme has no snapshot support; you probably should file this on enzyme-to-json.

[dijs]

I am also having this issue...

[likethemammal]

Adding the below code to my "jest" setting in my package.json fixed my issue

    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]

[anosikeosifo]

Thanks @likethemammal that solved the issue for me too!

[MaxGuitet]

I was having the same issue even with "enzyme-to-json/serializer", but only with many tests. It seems the issue arises when the snapshots is too big and creates a memory issue (hence the Invalid string length). Splitting the tests into two different files solved the issue for me.