codesandbox-client Jest in CodeSandbox 3.0

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

Feb 08 '18 12:02 gautamarora

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

Feb 08 '18 16:02 gautamarora

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

Feb 08 '18 16:02 gillchristian

jest.config.js support would be really nice.

Mar 07 '18 13:03 alexilyaev

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

Mar 07 '18 14:03 gillchristian

Fake timers 🙏

jest.useFakeTimers is not a function

May 14 '18 16:05 rdiazv

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

May 18 '18 23:05 the0neWhoKnocks

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

Jun 14 '18 17:06 Pyrolistical

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

Jul 26 '18 14:07 codialsoftware

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.

Sep 19 '18 14:09 jdhines

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

Jan 17 '19 15:01 iDVB

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

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

Feb 14 '19 08:02 dwiyatci

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

screenshot 2019-02-20 at 10 17 51

Feb 20 '19 09:02 SaraVieira

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

Feb 20 '19 16:02 dwiyatci

Shhhhhit, no idea haha

Ask Ives 🤔

@compuives

Feb 21 '19 16:02 SaraVieira

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

Mar 08 '19 06:03 mohsinulhaq

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

Mar 22 '19 13:03 lbogdan

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

May 23 '19 13:05 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?)

May 23 '19 17:05 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

May 29 '19 09:05 karlhorky

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");
});