Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

When jest.fn() inside a enzyme ReactWrapper, snapshots get really large #107

Open
swashata opened this issue May 21, 2018 · 3 comments
Open

Comments

@swashata
Copy link

Yes I know that we should not snapshot test against something dynamic as jest.fn() and I swear 馃槆it was unintentional.

But I have found that when jest.fn() is passed as a prop to some component, the snapshot fails everytime (which is expected) but along with this, it generates some really really large snapshot files.

An example for reproducing this can be found here https://github.com/swashata/enzyme-to-json-bug

You can check the file https://github.com/swashata/enzyme-to-json-bug/blob/master/__snapshots__/Test.spec.jsx.snap which is like 7.6MB.

I guess this can be a enzyme-to-json thing?

@JemarJones
Copy link

I've noticed the same thing. It seems to include the entire mock function in the snapshot, thus requiring that the mock function be included in final code of whatever component you have. I don't really want to have that dependency in my tests, so i was thinking maybe i could use the https://jestjs.io/docs/en/snapshot-testing#property-matchers of jest to simply say that i expect.any(Function) in the place of that. But unfortunately i'm not seeing how property matchers can be used easily with the output of this library. Is there maybe a helper matcher function that exists/could be created?

@JemarJones
Copy link

JemarJones commented Aug 24, 2018

Kind of dumb, but my temporary solution (note, only if you dont care whether the mockfunction specifically becomes a prop of your component) is just to do the following

const passThroughCallback = (callback) => (...args) => callback(...args);
...
const tree = shallow(
  <ComponentImTesting
    propFunc={passThroughCallback(mockCallback)}
  />
 );

Now the snapshot will just have
someThing={[Function]}
instead of including the entire MockFunction wherever the propFunc is passed.

@Exomnius
Copy link

Exomnius commented Nov 6, 2018

Any update on this issue? Or if anyone has a way of implementing a fix, we can create a PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants