TypeError Cannot read property 'body' of null

[AvraamMavridis]

• @testing-library/react version: 10.0.4
• react version: 16.13.1
• node version: 11
• npm (or yarn) version: 6.14.5

What you did:

What happened:

Cleanup is happening before react finishes its work, crashing the test

Reproduction:

https://repl.it/repls/PeskyStimulatingBetaversion

Problem description:

[AvraamMavridis]

Related facebook/react#15691

[kentcdodds]

It's possible that this is a bug in the coverage instrumentation transformation. Do you get this error only when running with --coverage enabled?

[AvraamMavridis]

@kentcdodds its without --coverage. Here is my command

cross-env CI=true jest --verbose --color

The component where it crashes is looking like:

const ShippedIngredientsProvider = function ShippedIngredientsProvider(props) {
  const { selectedCountry } = props;
 
  const [shippedIngredientsState, setShippedIngredientsState] = useState({
    ingredients: [],
  });

  let updateState = true;

  const setState = obj => {
    if (updateState) {
      // crashes here
      setShippedIngredientsState({ ...shippedIngredientsState, ...obj });
    }
  };

  useEffect(() => {
    // ... some fetching happens here

    return function cleanUp() {
      updateState = false;
    };
  }, [selectedCountry]);

  return (
    <ShippedIngredientsContext.Provider value={[shippedIngredientsState]}>
      {props.children}
    </ShippedIngredientsContext.Provider>
  );
}

[kentcdodds]

I think you missed some of that component... The code you have right there isn't returning anything.

[AvraamMavridis]

@kentcdodds sorry updated

[kentcdodds]

I'm this case I believe the solution would be to use waitFor to make sure your test waits to complete until after the UI had settled.

Cleanup happens when the test is finished and you're not waiting for the component to do it's work before the test finishes. Good luck!

[derekprice]

@kentcdodds Could you explain a little further what you meant when you mentioned the coverage instrumentation transformation potentially being an issue? We're still running into this issue (passing locally, failing only sometimes in CI when using --coverage) and we're using waitFor for each assertion in these tests.

[kentcdodds]

Sometimes the code that's generated for coverage can have issues that change the behavior of the software. That would be a bug in the Babel plugin responsible for that.

[derekprice]

@kentcdodds Got it, that makes sense.

After doing more investigation, it actually looks like 90% of the time that our RTL tests are failing with the 'body' of null error, it's referencing an unhandled API failure in a completely unrelated component file, which triggers a sweetalert popup that seems to be causing issues. (For context, we just started incorporating RTL in our test suite which is mostly Enzyme.)

I know that cleanup gets run automatically as part of afterEach if you use Jest, but do you think running cleanup before each test here could help to account for things like this? That feels a little hacky, but really just confused why it could be happening.

For example (the Settings and PlanStatus components don't interact with each other whatsoever, for reference):

  ● Settings › blocks the user from accessing majority of settings if criteria aren't met

    TypeError: Cannot read property 'body' of null

      12 | 
      13 |   const errMsg = errorList && errorList[0] ? errorList[0].message : error;
    > 14 |   swal('Sorry! Something went wrong', errMsg, 'error');
         |   ^
      15 | };
      16 | 
      17 | export const setErrorMessage = error => {

      at swal (node_modules/sweetalert/lib/sweetalert.js:64:157)
      at handleApiError (frontend/util/errors.js:14:3)
      at Promise.all.then.catch.err (frontend/plans/plan-status.jsx:61:34)

(Also, I totally realize it's super difficult to debug something like this without much more detail, but for the most part, the issue has been pretty sporadic and only happens in CI, so I'm struggling to come up with a bite-size way to reproduce it. 😞 )

[kentcdodds]

If you can come up with a small reproduction following the instructions here, then the community can help you out :)

[ilovett]

Check if you are on latest @testing-library/* packages and also using jest-environment-jsdom-sixteen fixed this issue for me.

[kee0624]

I am having this issue and happen randomly, below is my node_package version.

"@testing-library/dom": "^8.10.1",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.1.2",
"jest": "^27.3.1",
"msw": "^0.20.5",
"react-dom": "^17.0.2",
"babel-loader": "^8.2.3",

Here is one of my test.

 it('should render 2 items', async () => {
    const { container } = render(<ByFileBreakdown />, { store: newStore });
    await waitFor(() => expect(container.querySelectorAll('[data-inactive]')).toHaveLength(2));
  });

The error message

TypeError: Cannot read property 'body' of null

   21 |   error: BaseError;
   22 |   dispatch: (content: object, props: Options) => void;
 > 23 | }

I am not sure why it failed sometimes, I did try to increase the testTimeout: 10000, in the jest.config.js, but it is not fixing the issue.

The command I run "test": "jest --env=jsdom --maxWorkers=50%", and for the test I am using msw for mocking the response.

[kimskovhusandersen]

Hi everyone,

I encountered a similar issue where my tests were not behaving as expected. After some investigation, I found that the solution was to wrap my events in an await act.

Here’s an example of how I adjusted my code:

Before:

fireEvent.click(button);
expect(something).toBe(someValue);

After:

await act(async () => {
  fireEvent.click(button);
});
expect(something).toBe(someValue);

This ensures that all updates related to the event have been processed before jest is torn down.

I hope it helps others facing the same issue!

[MatanBobi]

@kimskovhusandersen This is not needed as we're wrapping all interactions with act for you. What you're experience is probably something else.