How to test in Jest?

[thetaPC]

I'm trying to change the value in Jest.

I keep getting this error: [TypeError: Cannot read properties of undefined (reading 'md')] when using fireEvent.keyDown(selectElement, { key: 'ArrowDown', code: 40 });

It's a bit frustrating since fireEvent.focus(selectElement); works fine.

[csandman]

There has been some discussion about that here: #19

I think the main question is, are you wrapping your tests in a ChakraProvider?

[thetaPC]

@csandman Yup, I have no issues accessing other Chakra components.

[thetaPC]

Not sure if this is related, but I also can't access the variant prop. Every other extra prop works without issues.

[csandman]

The variant prop was added in v4.2.0 so it makes sense that it wouldn't work. And besides that, it's hard to diagnose this without more info. The first thing I'd try is to update to the latest version of this package, chakra, and the emotion packages. If that doesn't help, I'm not sure what to say without a reproduction of some kind.

[thetaPC]

Variant works now with the update, thanks! Are there plans on documentation regarding custom variants?

As for the Jest testing, it seems to be an issue with nested libraries. chakra-react-select is being used in a a custom component library. Jest passes there. It fails when the component library is installed on a project. If a solution is found, I'll come back and post.

[csandman]

Variant works now with the update, thanks! Are there plans on documentation regarding custom variants?

If by custom variants you mean customized in the same way Chakra handles custom variants in the theme, the only way to do that would be to add a new variant for Chakra's Input component, because this package pulls the styles directly from there. Otherwise you could use chakraStyles or make custom components to achieve custom styling.

As for the Jest testing, it seems to be an issue with nested libraries. chakra-react-select is being used in a a custom component library. Jest passes there. It fails when the component library is installed on a project. If a solution is found, I'll come back and post.

This sounds very similar to an issue I've seen in the past where there are multiple instances of @chakra-ui/system being installed. The version CRS ends up using may not be the same as the version the ChakraProvider is coming from which would prevent CRS from being able to pull in the theme. Is the component library public? I could check out how it's set up to see if that's causing the issue.

[thetaPC]

Oh, that makes sense. I'll have to start with that. Thank you for the starting reference! Unfortunately, the library is not public but I'll investigate and update at a later time.