dom-testing-library: query* causes TypeError: Converting circular structure to JSON

The error seems to happen when HTML elements are passed to expect as a value to be compared. When an assertion fails jest tries to format the test output and somewhere along the way it passes the argument of expect to JSON.stringify. The elements contain circular references so stringifying throws.

Here’s a crude monkeypatch to delete the circular reference when making assertions. It doesn’t handle all cases and might have side-effects but it was good enough for my use case and hopefully highlights where the issue lies.

In global setup file (“setupFilesAfterEnv”):

const removeReactInternalInstance = element => {
  const keys = Object.keys(element);
  const reactInternalInstanceKey = keys.find(key => /^__reactInternalInstance/.test(key));
  if (reactInternalInstanceKey != null) delete element[reactInternalInstanceKey];
};
const { expect } = window;
window.expect = (actual, ...rest) => {
  if (typeof actual === 'object' && actual !== null) {
    if (Array.isArray(actual)) {
      actual.forEach(removeReactInternalInstance);
    } else {
      removeReactInternalInstance(actual);
    }
  }
  return expect(actual, ...rest);
};
Object.entries(expect).forEach(([key, value]) => window.expect[key] = value);

I would argue this is a bug in Jest rather than a bug in testing-library. Jest should be able to format objects with circular references or at least give an informative error message.

@timdeschryver pushed up here: https://github.com/agmcleod/testinglib-cyclic-error, sadly though it seems to be intermittent for me. I can re-run it multiple times in a row and it will be fine. But occasionally I will see:

    TypeError: Converting circular structure to JSON
        --> starting at object with constructor 'HTMLParagraphElement'
        |     property '__reactFiber$2jyvco3rr65' -> object with constructor 'FiberNode'
        --- property 'stateNode' closes the circle
        at stringify (<anonymous>)

Isn’t that because query is actually a Promise?

doing so will fail

but this works

Maybe this would help someone:

// if expect do not exist
await expect(screen.findByTestId(contextMenuId)).rejects.toThrowError();

// expect it exist
await expect(screen.findByTestId(contextMenuId)).resolves.toBeDefined();

I’m closing this one as this is a jest issue and will do my best to assist in fixing the jest issue as I understand that this might happen in every react app on a failing test.

Digging into it, this looks heavily related to this issue in jest.

Was able to reproduce generating an app with create-react-app and then adding this test to App.test.js:

function Text(props) {
  return <p>{props.children}</p>
}

test('renders a paragraph', () => {
  render(<Text>hi</Text>)
  expect(screen.getAllByText('hi')).toEqual([])
})

Versions in package.json:

{
  "name": "testlib-cyclic",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

@MatanBobi

I had the circular error issue with this code

expect(screen.queryByRole('button', {name: 'Add'})).toBe(null)

For now, resorted to the following workaround:

expect(screen.queryByRole('button', {name: 'Add'}) === null).toBe(true)