Jest in CodeSandbox 3.0

[gautamarora]

Creating an issue to discuss future features for Jest integration in CodeSandbox...

Jest in CodeSandbox 2.5 - issue | release

• [x] Unit testing
• [x] Mock functions
• [x] Snapshot testing (read only, does not create new snapshots)
• [x] Async runner
• [x] UI - watch mode, show test fail inline in editor, run tests for single suite

Jest in CodeSandbox 3

• [ ] Snapshot saving
• [ ] Manual mocks
• [ ] Jest config
• [ ] Code Coverage

Please comment in this issue with more features that should be added to the list.

cc @CompuIves

[gautamarora]

also cc @gillchristian - interested to help with code or ideas? :)

[gillchristian]

Yeah, I just joined Discord, we can talk there :smile:

[alexilyaev]

jest.config.js support would be really nice.

[gillchristian]

@alexilyaev indeed, in the Discord I mentioned I'd like to work on it but haven't found the time yet :grimacing:

[rdiazv]

Fake timers 🙏

jest.useFakeTimers is not a function

[the0neWhoKnocks]

Just came across this ticket after commenting on another ticket https://github.com/CompuIves/codesandbox-client/issues/692#issuecomment-390355107. There may be issues utilizing enzyme as well.

To clarify, people will have issues running enzyme if they utilize setupTestFrameworkScriptFile like is suggested in the official enzyme docs https://github.com/airbnb/enzyme/blob/master/docs/guides/jest.md#configure-with-jest

[Pyrolistical]

Would have been nicer when I called jest.mock(..) instead of getting TypeError: jest.mock is not a function, I would get a Error: not implemented yet in codesandbox.io, see: https://github.com/CompuIves/codesandbox-client/issues/513

[codialsoftware]

or jest.doMock ;) I've look through half of half of the Internet to finally find this bug :D

[jdhines]

Would have been nicer when I called jest.mock(..) instead of getting TypeError: jest.mock is not a function, I would get a Error: not implemented yet in codesandbox.io, see: https://github.com/CompuIves/codesandbox-client/issues/513

+1 As local code works fine, the "not a function" error is a bit misleading (to me anyways), as I literally found out about CodeSandbox today (super awesome BTW!) and trying to use it to testdrive react components and jest tests. Not knowing the architecture, I just assumed that if Jest was in the dependencies correctly, I could call any of the jest.x() functions.

[iDVB]

So I've read this thread over 3x and still not sure if this is still an known issue or not. I continue to get the error... jest.mock is not a function

There seems to be codesandbox docs about using Jest... but no mention of limitations. https://codesandbox.io/docs/tests

[dwiyatci]

@iDVB I don't think jest.mock()/"automatic mock" is supported yet. 🤔

How do we check the version of CodeSandbox from the dashboard btw?

[SaraVieira]

@dwiyatci You can check the version in any sandbox here:

[dwiyatci]

@SaraVieira Thank you. :) But what I meant was: how can we tell whether it's CodeSandbox 2.5 or 3.0? :sweat_smile:

[SaraVieira]

Shhhhhit, no idea haha

Ask Ives 🤔

@compuives

[mohsinulhaq]

jest.useFakeTimers is not a function Hi, is there any update for above fix?

[lbogdan]

@gautamarora , @gillchristian Are you guys still interested in pursuing this?

[karlhorky]

I'd be interested in having the Snapshot Saving feature if possible!

Or is it possible already?

For example, I was thinking about the potential of the Run any NPM Script feature CodeSandbox Containers, which seems to enable running Jest with the -u flag via an npm script...

[karlhorky]

@SaraVieira just confirmed my suspicions that this is only possible at the moment with Containers.

Is CodeSandbox satisfied with this? Or would you also like to be able to create and update files on non-Container sandboxes? (maybe a whitelisted list of things that can be updated, at least to start with?)

[karlhorky]

Also Manual Mocks - those would be super useful.

Workaround: At the moment, the closest thing to a workaround that I've found is to use the import * as name from '../relative/path' syntax with mock functions, but that only seems to work for local modules, not dependencies...

import { useIt } from "./use-default-export";

import * as myfunc from "./default-export-function";

test("use-default-export-function", () => {
  expect(useIt()).toEqual("real");
});

test("use-default-export-function with mock", () => {
  myfunc.default = jest.fn(() => "unreal");
  expect(useIt()).toEqual("unreal");
});

https://codesandbox.io/s/88wlzp6q88

[sag1v]

People who came here because this error or similar (like me)

jest.useFakeTimers is not a function

For now you can bypass this issue and use the done() callback of jest

it("uses a timer", done => {
  console.log("start");
  let x = 0;
  setTimeout(() => {
    console.log("done!");
    expect(x === 0).toBe(true);
    done();
  }, 250);
  console.log("continue");
});

[aomini]

is this still an issue? I'm getting the same error from 2018 on jest.mock

[stephanepericat]

is this fixed yet ?

[aomini]

@stephanepericat i dont think so.. its since 2018

[ansh-les]

Lol just wasted so much time trying to debug it. nvm I guess 😞

[gugol2]

Still is not jest.mock() available in CodeSandbox?

I just tried..., what a pity!

[rollrodrig]

september 2020, jest.mock and jest.useFakeTimers are still bugs.

[Sayvai]

I opened a GitHub Discussions chat (#5042) on this.

Feel free to comment over there too.

Hopefully it will help further gain traction for serious consideration to add Jest mocks support, alongside this open issue.

[mrdulin]

Hit this issue today, codesandbox: https://codesandbox.io/s/crimson-framework-jddh2?file=/src/index.test.js

There was an error while evaluating the file:

jest.useFakeTimers is not a function

[aleks-rope]

jest.useFakeTimers is not a function

Issue still persists. Just checked today.

[lucksp]

jest.mock is not a function still an error.

https://codesandbox.io/s/misty-wave-ecvgf?file=/src/setupTests.js

[ardnahcivar]

jest.useFakeTimers is not a function still persists https://codesandbox.io/s/fancy-morning-lmwx6?file=/src/index.test.ts

[moogus]

guess this is still a problem 😔

[agallio]

Still got this error when running tests. https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples/tree/main/?from-embed&initialpath=%2F__tests__%2Fasync.js

jest.useRealTimers is not a function

TypeError: jest.useRealTimers is not a function
    at runWithJestRealTimers (https://vj929.csb.app/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:651:8)
    at runWithRealTimers (https://vj929.csb.app/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:634:12)
    at Window.evaluate (https://vj929.csb.app/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:682:26)
    at z (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:99284)
    at G.evaluate (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:111641)
    at be.evaluateTranspiledModule (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:121458)
    at c (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:111387)
    at Window.evaluate (https://vj929.csb.app/node_modules/@testing-library/react/dist/@testing-library/react.esm.js:44:17)
    at z (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:99284)
    at G.evaluate (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:111641)
    at be.evaluateTranspiledModule (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:121458)
    at c (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:111387)
    at Window.evaluate (https://vj929.csb.app/src/__tests__/react-lazy-and-suspense.js:13:15)
    at z (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:99284)
    at G.evaluate (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:111641)
    at be.evaluateTranspiledModule (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:121458)
    at be.evaluateModule (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:120957)
    at https://codesandbox.io/static/js/7.4b9a6a838.chunk.js:1:15776
    at l (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:257422)
    at Generator._invoke (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:257175)
    at Generator.forEach.e.<computed> [as next] (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:257779)
    at t (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:2420)
    at i (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:2631)
    at https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:2690
    at new Promise (<anonymous>)
    at https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:2571
    at https://codesandbox.io/static/js/7.4b9a6a838.chunk.js:1:16135
    at Array.map (<anonymous>)
    at e.<anonymous> (https://codesandbox.io/static/js/7.4b9a6a838.chunk.js:1:15477)
    at l (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:257422)
    at Generator._invoke (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:257175)
    at Generator.forEach.e.<computed> [as next] (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:257779)
    at t (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:2420)
    at i (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:2631)

[dhatGuy]

Still got this error when running tests. https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples/tree/main/?from-embed&initialpath=%2F__tests__%2Fasync.js

jest.useRealTimers is not a function

TypeError: jest.useRealTimers is not a function
    at runWithJestRealTimers (https://vj929.csb.app/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:651:8)
    at runWithRealTimers (https://vj929.csb.app/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:634:12)
    at Window.evaluate (https://vj929.csb.app/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:682:26)
    at z (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:99284)
    at G.evaluate (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:111641)
    at be.evaluateTranspiledModule (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:121458)
    at c (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:111387)
    at Window.evaluate (https://vj929.csb.app/node_modules/@testing-library/react/dist/@testing-library/react.esm.js:44:17)
    at z (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:99284)
    at G.evaluate (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:111641)
    at be.evaluateTranspiledModule (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:121458)
    at c (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:111387)
    at Window.evaluate (https://vj929.csb.app/src/__tests__/react-lazy-and-suspense.js:13:15)
    at z (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:99284)
    at G.evaluate (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:111641)
    at be.evaluateTranspiledModule (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:121458)
    at be.evaluateModule (https://codesandbox.io/static/js/sandbox.3fb0c3bb6.js:1:120957)
    at https://codesandbox.io/static/js/7.4b9a6a838.chunk.js:1:15776
    at l (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:257422)
    at Generator._invoke (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:257175)
    at Generator.forEach.e.<computed> [as next] (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:257779)
    at t (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:2420)
    at i (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:2631)
    at https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:2690
    at new Promise (<anonymous>)
    at https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:2571
    at https://codesandbox.io/static/js/7.4b9a6a838.chunk.js:1:16135
    at Array.map (<anonymous>)
    at e.<anonymous> (https://codesandbox.io/static/js/7.4b9a6a838.chunk.js:1:15477)
    at l (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:257422)
    at Generator._invoke (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:257175)
    at Generator.forEach.e.<computed> [as next] (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:257779)
    at t (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:2420)
    at i (https://codesandbox.io/static/js/common-sandbox.51de09afd.chunk.js:1:2631)

Facing the same issue too

[KrustyC]

Hi here, I get the same issue as well https://codesandbox.io/s/modern-morning-md378

Do we have any update on this?

[wwwmonkey]

Apologies if cross-posting issue, but appreciate any work-around or ideas for my issue regarding Jest not working on Static templates: https://github.com/codesandbox/codesandbox-client/issues/5726

[CompuIves]

Yes, this is still something we want to do, but it's challenging. It's something that we haven't planned in the near-future, but we do want to expand the Jest functionality in the future. I can't tell when we'll have this though.

[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.

[nickserv]

It seems like this is still being worked on.

[robertjcolley]

I'm looking into this one and I have some questions about the jest implementation.

Normally, when the Jest global is initialized its created by the jest-runtime and mock/other timer functions are added to the global Jest object. This can be seen here.

What's happening in codesandbox is that the jest-runtime is never being initialized - I presume there may be some reason for this. That can be seen here, where jest is actually initialized here with the MockModule class from jest-mock, which populates part of the jest globals into the global space but doesn't add functions like _createJestObjectFor() from jest-runtime. This is why you can use spyOn but not mock - jest-mock actually doesn't declare a mock function until you initialize it with the MockModule.generateFromMetadata<T, Y extends Array>(

@CompuIves you're getting tagged just because you seem to be the only maintainer here. There may be someone better who can answer these questions. Sorry about that!

1. Is there a reason that jest-runtime isn't being used to its full extent here?
2. Why is jest-mock being used as the jest object here?

I am trying to get a jest-runtime instance set up in the codesandbox world. I presume there might be issues with this - namely the jest-runtime needs some sort of file/module resolver, which may not play nicely with the codesandbox environment.

For everyone who hasn't looked into it - Jest has a lot going on and even I don't completely understand how the Jest runtime works (and its created differently for node/jsdom!).

[milichev]

You know what... It's really annoying to spend time writing stuff cover, it with tests, and in the end, get this one 🤦🏽‍♂️🙃

[xblue-light]

Hey guess what .. jest.mock is still NOT a function sigh

[sunny15100]

Hey guess what .. jest.mock is still NOT a function sigh

[nickserv]

I'd recommend switching to cloud sandboxes as they can natively run Node tools (including Jest).

[benadam11]

I know cloud sandboxes are recommended, but sinon.useFakeTimers works (just in case anyone was still looking for a solution)