CRA - different test behaviour

[zaicevas]

🐛 bug report

Preflight Checklist

• [x] I have read the Contributing Guidelines for this project.
• [x] I agree to follow the Code of Conduct that this project adheres to.
• [x] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Description of the problem

I've been coding with CRA locally. After copy-pasting the code to codesandbox, I've encountered different test behaviour.

• Mocking window.fetch does not work (the call is not mocked). Mocking globalThis.fetch works, but causes an error. Locally, mocking window.fetch does work
• useEffect runs twice in the tests (probably due to strict mode?). For instance, if I have a useEffect(() => fetch(), []) the expect(fetch).toBeCalledTimes(2) will return true, while locally is not the case.

How has this issue affected you? What are you trying to accomplish?

It is frustrating that there are environment differences and that you can't control how tests are being run in codesandbox.

To Reproduce

In my provided sandbox, you can see the following observations:

1. jest.spyOn(window, 'fetch') or jest.spyOn(global, 'fetch') does not mock the fetch() call in App.jsx
2. expect(fetchMock).toBeCalledTimes(1); assertion fails

Link to sandbox: link (optional)

Your Environment

Software	Name/Version
Сodesandbox
Browser	Chrome
Operating System	Mac OS X 10.15.7

[github-actions[bot]]

This issue has automatically been marked stale because there has been no activity in a while. Please leave a comment if the issue has not been resolved, or if it is not stale for any other reason. After 2 weeks, this issue will automatically be closed, unless a comment is made or the stale label is removed.

[andreashouben]

Could it be that the code on your local machine simply runs faster than in codesandbox?

If you wait for your expectation the test succeeds.

await waitFor(() => expect(screen.getByText('Fetched')).toBeInTheDocument())

(rember to import waitfor from testing-library/react.)