setGlobalConfig not defined

[eric-burel]

Describe the bug setGlobalConfig doesn't seem to exist in @storybook/react To Reproduce Follow official doc to create a Jest global setup for decorators: https://storybook.js.org/addons/@storybook/react-testing.

Repro here (not minimal sorry): https://github.com/VulcanJS/vulcan-npm/pull/31 (uncomment in jest/setup.js and run yarn run test)

Expected behavior Should work :)

Additional context

• @storybook/react@6.2.9
• @storybook/react-testing@0.0.3

[yannbf]

Hey @eric-burel, thanks for using this library! And for providing a repo.

I noticed a few things:

1 - This library is called @storybook/testing-react. the react-testing was a naming mistake and since version 0.4 was migrated to the correct name, and since then it's deprecated. The solution is to just install the correct library.

2 - In your setup file, you are importing setGlobalConfig from @storybook/react where you should be importing from @storybook/testing-react. That is 100% my fault, the docs are wrong in the deprecated repo and I'd need to make an extra release to that package just so that npm updates the readme. Please check this instead.

3 - This library reuses the whole setup from your stories, so you don't need to do this:

<DefaultForm {...DefaultForm.args} model={Objects} /> 

but rather this:

<DefaultForm />  // will already contain all args and decorators embedded in it

// or this, in case you really want to override the model and not use the one from the story
<DefaultForm model={Objects} /> 

Now I'd love to make a PR to your branch, but while starting with it I noticed that there are failures in the test file which seem to be related to babel configuration and not related to this lib, and I can't afford to spend much time in this. I will be closing this issue, but feel free to reach out on discord to get more context or discuss anything really!

[eric-burel]

Awesome thanks for the fast answer!

I think I've added the .args thing is for TypeScript, the problem is that we still need a solution for un-partialling the props when doing Story<FoobarProps>. I've seen proposals but I think it's still an open issue. This makes the syntax a bit heavier in TS because you need to recast to the right type sometimes

[yannbf]

I understand it, but with testing-react you mostly don't need to access the args, unless you really want to. In your examples I saw that you accessed the args in order to spread them back to the component, which is not necessary. Maybe share some use cases and we can try to come up with a good solution 🤔

It's quite tricky, as the composed story should not require any prop as it's supposed to already contain them out of the box

[eric-burel]

Yeah I confirm I still need to spread back otherwise TypeScript will bothers me, because required props becomes optional in the args. I would need the args to have the exact same types as the props, but the args are removing required fields so it doesn't work yet. But it has already been signaled at Storybook level.

Edit: actually it works right after this update, because the component type is now correct (so it's also partial), I was able to remove the defaultProps things. Thanks!

[eric-burel]

Also, last issue, I have trouble with import React from "react" in preview.js => it is necessary for Jest, but adding it somehow completely breaks Storybook typings, so the exported stories have an any type. It's not directly related to this repo but more to the fact of loading Storybook in Jest, we probably like a small configuration to fix this. Edit again: it seems that if we add global decorators in preview.js, we need to rename it preview.jsx + import React explicitely so both unit test and the typings works as expected. Edit 2: but it takes a while to load...