React: Jest: Cannot assign to read only property '...' of object '...'

[bvaughn]

Right now in the React repo this test...

fit('blah', () => {
  expect(document.createElement('div')).toBe(document.createElement('div'));
});

...fails with the following meaningless error message:

TypeError: Cannot assign to read only property 'Symbol(impl)' of object '[object DOMImplementation]'

Apparently @trueadm mentions that this broke sometime recently because of a change we made. (I don't have details.) Its a pretty confusing behavior though.

[mycarrysun]

I'm having this as well. For me it is happening at this line:

expect(getByLabelText('YYYY')).toBe(document.activeElement);

[jcestibariz]

Same here, for me in:

expect(fn.mock.calls).toEqual([[element]]);

The assertion had failed because the expectation was incorrect. After the expectation was fixed the test passed.

[greypants]

Same issue - thanks @jcestibariz, you were right. This error only seems to happen when the objects are different (as they are in the original issue description - those are two distinct objects being created). My example was also looking for document.acitveElement, and it turned out to be a timing/async issue. Wrapping it in a waitFor addressed the issue:

await waitFor(() => {
  expect(getByText("trigger")).toBe(document.activeElement);
});

But a nicer error message would still be appreciated :)

[pahan35]

It happens when calling replaceMatchedToAsymmetricMatcher() inside printDiffOrStringify()

https://github.com/facebook/jest/blob/master/packages/jest-matcher-utils/src/index.ts#L359

@SimenB any ideas?

[pahan35]

Some info about comparable params

[vickOnRails]

I spent a huge amount of time around this today.

I solved mine by ensuring the nodes being compared were actually the same. This doesn't yet make sense to me, but hopefully, it helps someone...

Here's my test code

test("Unneeded properties aren't passed into DOM", () => {
    const { getByTestId } = render(
      <div className="container" data-testid="button-container">
        // Notice the data-testid attribute here
        <button type="submit" className="css-fxq2iz" data-testid="button">
          Click Me
        </button>
        // but not here
        <Button variant="primary" variantStyle="outline" block size="medium">
          Click Me
        </Button>
      </div>
    );

    const buttonsContainer = getByTestId("button-container");
    const vanillaButton = buttonsContainer.querySelectorAll("button")[0];
    const renderedButton = buttonsContainer.querySelectorAll("button")[1];

    expect(vanillaButton).toEqual(renderedButton);
  });

Here's the error I get

It goes away when I add the same attributes to the Button element

<Button variant="primary" variantStyle="outline" block size="medium" data-testid="button">
    Click Me
</Button>

It took me some time to realize that this wasn't really a bug, but the test just failed. I didn't understand the error message and after hours of googling, I got more confused than I was.

Like @greypants said, it would be great to have a nicer error message.

[bvaughn]

To be clear, this issue is specifically about improving the error message :smile: because the current one is unhelpful and confusing.

[pahan35]

We see a current message because replaceMatchedToAsymmetricMatcher fails on preparing the diff.

IMHO it's not about improving the error message, it's about fixing replaceMatchedToAsymmetricMatcher to print the diff for DOM elements without failures.

[chrisbobbe]

@pahan35 said:

It happens when calling replaceMatchedToAsymmetricMatcher() inside printDiffOrStringify()

https://github.com/facebook/jest/blob/master/packages/jest-matcher-utils/src/index.ts#L359

@SimenB any ideas?

Hmm, interesting! It looks like this issue belongs in the Jest repository, then?

FWIW, I'm seeing TypeError: Cannot assign to read only property 'Symbol(context)' of object '[object URL]'.

[gaearon]

I think there’s a misunderstanding.

We are users of Jest just like you; this is not the canonical issue where you can expect that adding comments would help solve it. You need to go and file it in the Jest repo instead. This is a React repo, not Jest repo.

I am locking down.

[gaearon]

This is fixed in Jest.
https://github.com/facebook/jest/releases/tag/v26.4.1