-
Notifications
You must be signed in to change notification settings - Fork 45
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’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vertical version is not working in unit tests. #108
Comments
Hey @huseyindeniz - that error usually means that the
|
hi @jeanverster thanks for the quick feedback. My example is a modified version of my original test. Original test is more complicated and depends on lots of things. But as you can see in the modified version, I'm able to make it work by only removing orientation. My chakraprovider and it's theme correctly applied in this test. I can also see it in the debug logs. And additionally, I modified my original component and it accepts orientation prop now. I'm able to test it by setting orientation as horizontal. I'll continue with this hacky solution. But I can also show you my configuration: test-utils.ts => basically it injects chakra provider to all my tests import { ChakraProvider } from '@chakra-ui/react';
import { render, RenderOptions } from '@testing-library/react';
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import * as React from 'react';
import { initReactI18next, I18nextProvider } from 'react-i18next';
import { theme } from './features/ui/components/Layout/Theme/theme';
// eslint-disable-next-line import/no-named-as-default-member
i18n
.use(LanguageDetector)
.use(initReactI18next)
.init({
debug: false,
fallbackLng: 'en',
keySeparator: false,
nonExplicitSupportedLngs: true,
returnEmptyString: false,
resources: { en: {} },
});
const AllProviders = ({ children }: { children?: React.ReactNode }) => (
<ChakraProvider theme={theme}>
<I18nextProvider i18n={i18n}>{children}</I18nextProvider>
</ChakraProvider>
);
const customRender = (ui: React.ReactElement, options?: RenderOptions) =>
render(ui, { wrapper: AllProviders, ...options });
export { customRender as render };
export { i18n }; and this my theme.ts file: import { extendTheme } from '@chakra-ui/react';
import { StepsTheme as Steps } from 'chakra-ui-steps';
export const theme = extendTheme({
config: {
initialColorMode: 'system',
},
components: {
Steps,
},
fonts: {
heading: `'Open Sans', sans-serif`,
body: `'Raleway', sans-serif`,
},
}); |
Ah, that makes more sense! Ok I will have a look at this, thanks for raising :) |
thank you @jeanverster |
Hi @jeanverster and @huseyindeniz , I keep getting Can you please point me to what I'm doing wrong or any resource for using chakra-ui-steps with jest? my themes.ts file
my login.test.tsx file
|
I believe you need to add some code into test-utils.ts file. You can see it in my previous comment. |
Hi and thanks for this beautiful package. I'm having trouble with unit testing of my component which uses vertical steps. Here is a simple demonstration:
This test fails with the famous error: TypeError: Cannot read properties of undefined (reading 'width')
But if I only remove orientation="vertical" or make it orientation="horizontal", it works fine. Steps is correctly defined in my theme configuration on both application and test-utils file.
The text was updated successfully, but these errors were encountered: