Codesandbox-client: Errors when using React Testing Library

[rozenmd]

🐛 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 get the following stack trace trying to run Kent C Dodd's react-testing-library examples:

Identifier 'test' has already been declared

SyntaxError: Identifier 'test' has already been declared
    at eval (<anonymous>)
    at Eo (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:201748)
    at e.value (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:218712)
    at e.value (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:245871)
    at t (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:218427)
    at evaluate (https://0xp2rpljkn.csb.app/node_modules/pretty-format/26.4.2/build/index.js:8:3)
    at Eo (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:201752)
    at e.value (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:218712)
    at e.value (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:245871)
    at t (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:218427)
    at evaluate (https://0xp2rpljkn.csb.app/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:567:26)
    at Eo (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:201752)
    at e.value (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:218712)
    at e.value (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:245871)
    at t (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:218427)
    at evaluate (https://0xp2rpljkn.csb.app/node_modules/@testing-library/react/dist/@testing-library/react.esm.js:44:17)
    at Eo (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:201752)
    at e.value (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:218712)
    at e.value (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:245871)
    at t (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:218427)
    at evaluate (https://0xp2rpljkn.csb.app/src/__tests__/async.js:15:15)
    at Eo (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:201752)
    at e.value (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:218712)
    at e.value (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:245871)
    at e.value (https://codesandbox.io/static/js/sandbox.1309cce89.js:1:245491)
    at https://codesandbox.io/static/js/jest-lite.4119f3084.chunk.js:1:15520
    at l (https://codesandbox.io/static/js/common-sandbox.26857ffcc.chunk.js:1:255733)
    at Generator._invoke (https://codesandbox.io/static/js/common-sandbox.26857ffcc.chunk.js:1:255486)
    at Generator.forEach.e.<computed> [as next] (https://codesandbox.io/static/js/common-sandbox.26857ffcc.chunk.js:1:256090)
    at t (https://codesandbox.io/static/js/common-sandbox.26857ffcc.chunk.js:1:2405)
    at i (https://codesandbox.io/static/js/common-sandbox.26857ffcc.chunk.js:1:2616)
    at https://codesandbox.io/static/js/common-sandbox.26857ffcc.chunk.js:1:2675
    at new Promise (<anonymous>)
    at https://codesandbox.io/static/js/common-sandbox.26857ffcc.chunk.js:1:2556
    at https://codesandbox.io/static/js/jest-lite.4119f3084.chunk.js:1:15876
    at Array.map (<anonymous>)
    at e.<anonymous> (https://codesandbox.io/static/js/jest-lite.4119f3084.chunk.js:1:15224)
    at l (https://codesandbox.io/static/js/common-sandbox.26857ffcc.chunk.js:1:255733)
    at Generator._invoke (https://codesandbox.io/static/js/common-sandbox.26857ffcc.chunk.js:1:255486)
    at Generator.forEach.e.<computed> [as next] (https://codesandbox.io/static/js/common-sandbox.26857ffcc.chunk.js:1:256090)
    at t (https://codesandbox.io/static/js/common-sandbox.26857ffcc.chunk.js:1:2405)
    at i (https://codesandbox.io/static/js/common-sandbox.26857ffcc.chunk.js:1:2616)

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

Can't run tests in CodeSandbox

To Reproduce

I was just trying to run the tests in kentcdodds/react-testing-library-examples: https://codesandbox.io/s/0xp2rpljkn

Link to sandbox: link

Your Environment

| Software | Name/Version |
| ---------------- | ------------ |
| Сodesandbox |
| Browser | Chrome |
| Operating System | Mac OS X 10.13.6 |

[ajayvarghese]

I'm facing this exact same issue. 😓

[Sayvai]

I am also facing the same issue with running my React Testing Library dependency example on CodeSandbox.

Identifier 'test' has already been declared

SyntaxError: Identifier 'test' has already been declared
    at eval (<anonymous>)
    at z (https://codesandbox.io/static/js/sandbox.acb5a2246.js:1:97982)
    at X.evaluate (https://codesandbox.io/static/js/sandbox.acb5a2246.js:1:110137)
    ...

[georgemackayshore]

I hit this issue myself, and had a bit of a deep dive into what's going wrong.

It appears that @testing-library/dom has a dependency upon pretty-format (a jest module). This line in the module exports a const test, and causes this error as the sandbox module evaluator for tests passes a set of globals, which includes a jest-lite function named test.

Haven't thought of a way around it yet. I'm letting my brain rest a little.

EDIT: Linking the other issue for visibility: #4887

[CompuIves]

Wow @georgemackayshore, I was going through the exact same path as you. I haven't found a great solution yet, but I have a "quick" fix here: https://github.com/codesandbox/codesandbox-client/pull/5037.

A better fix could be to wrap the code in a second function, to move the test to a higher scope.

[Sayvai]

@CompuIves @georgemackayshore

Could the root cause you've managed to establish (and fixed) on this ticket be in any way similar to what's causing the Jest bug (example) (issue #513) by any chance?

TypeError: jest.mock is not a function

[Sayvai]

Actually, don't worry. It seems like from this chat, Jest mocks just aren't supported yet.

That's right - this is not yet supported with our Jest integration for client sandboxes and I don't know of details when it will be. Instead you could create a container sandbox, which will let you set things up however you like and bring in support for mock that way.