Fix Jest example's usage of default imports

[adimit]

Related Issues or Discussions

Inspired by #559

Summary

Default exports and imports are deprecated. The default import of zustand generates a deprecation warning on the console. The default export that was suggested previously would actually fail to compile. See the comments at the very bottom of #559 for further discussion.

This commit fixes the example in the documentation by introducing named exports & imports instead of default exports & imports.

Check List

• yarn run prettier for formatting code and docs

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3260475:

Sandbox	Source
React	Configuration
React Typescript	Configuration
React Browserify	Configuration
React Snowpack	Configuration
React Parcel	Configuration
@pavlobu/zustand demo	Configuration

[sewera]

Nice catch! The changes LGTM, but I've got a small discussion started in a comment in code above (or below, depending on how Github views it).

[sewera]

Why jest.requireActual? Won't the line above
(import { create as actualCreate } from 'zustand')
be sufficient even with jest?

From what I understood from the Jest docs,
jest.requireActual is for bypassing the jest.mock,
when we want to get to the actual implementation
from inside the mock.
Here, there is no jest.mock('zustand'),
so no way for Jest to confuse the implementations.

I see that it wasn't your code before,
but I wanted to drop in when we are at it :)

[adimit]

Yeah, I was wondering the same. The tests run fine here with

import { create as actualCreate } from 'zustand';

instead. However, I'm getting a compile time warning from TS:

The signature '(store: StoreApi<unknown>): UseBoundStore<StoreApi<unknown>>' of 'actualCreate' is deprecated.

That I don't quite know where it's coming from. I'm guessing that jest.requireActual just returned create as any, and now that we have actual types… well.

The type of createState in our mocked create could also be improved

const create = (createState: Parameters<typeof actualCreate>[0]) => { … }

… but I wanted to keep changes minimal. (Our setup doesn't permit implicitly typed function arguments.)

[adimit]

@sewera I've fixed the docs to use plain import statements. I also fixed some mistakes in the Typescript docmentation. The create function was curried there for no reason, and the file type was TSX, which it didn't need to be.

(The deprecation warnings I was getting were due to me using the wrong type before and are no longer a problem.)

[giulianovarriale]

Hello,
First, thanks for picking these fixes up. I was going to open a PR but I realised you were already working on it.

I believe the need to use the jest.requireActual is to prevent circular dependencies.
If you write a test for a store you've created, the mock is going to run and it will import zustand which is the mock which will import the zustand mock again and it goes like this forever. See the screenshot:

.

So, I would suggest to keep the commented line, but I would make it type safe by doing the following:

const actualCreate = jest.requireActual<typeof import("zustand")>("zustand").create; // if using jest

[adimit]

That's a great suggestion, thanks!

It's curious, I'm not getting that problem in our project. But madge flags it as a circular dependency.

I guess we'll keep it with jest.requireActual—your suggestion removes the only drawback. I'll update the PR.

[sewera]

I think I found what was the idea behind jest.requireActual:
it is the advice to mock the 'zustand' dependency.

So if it's true, I think it should be brought back because of that.
It would be nice if you came up with some test to actually check
if my concern is true, because I don't have any idea for now,
nor do I have time to come up with some.

[dai-shi]

• yarn run prettier for formatting code and docs N/A, it's just docs changes.

For formatting docs. 😄

[adimit]

• yarn run prettier for formatting code and docs N/A, it's just docs changes.

For formatting docs. smile

🙈 Oh dear. There's a German proverb: those who can read are at a clear advantage. Clearly, I wasn't. Thanks for the hint.

[Scimonster]

This change, removing currying from the typescript docs, broke the mock setup for me. I'm using zustand 4.1.5. Is it related to a change since then?

[adimit]

This change, removing currying from the typescript docs, broke the mock setup for me. I'm using zustand 4.1.5. Is it related to a change since then?

Interesting. Could you specify how it "broke"? How are you calling the mocked create? I'm assuming you're using TS. I'm using TS here with 4.3.6, and it works well.