We Keep Coding

'Cannot read properties of undefined' with React Testing library for decoding JWT token

I'm fairly new to React testing library and am using a function within a useEffect to decode a user token from keycloak when they sign up, to determine what type of user they are and render different Menu's based on that. This new Jwt function I created though, is causing a lot of my previously working tests within other files to fail as it throws an error like below:
I'm sure how to deal with this error on the testing side, should I be mocking this decoder function within the test file?
This is my main file:
import React, {useEffect, useState, useMemo, useCallback} from "react";
import {withTranslation} from "react-i18next";
import "./index.scss";
import {historyObject} from "historyObject";
import {Heading} from "#xriba/ui";
import { keycloak } from "utils/keycloak";
export const Menu = (props) => {
const {t} = props;
const [userHasCommunities, setUserHasCommunities] = useState(false);
useEffect(() => {
function parseJwt (token) {
var base64Url = token.split('.')[1];
var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
if (JSON.parse(jsonPayload).communities?.length > 0){
setUserHasCommunities(true)
}
return JSON.parse(jsonPayload);
};
parseJwt(keycloak.token);
}, [userHasCommunities])
const buildItem = useCallback((item) => {
const isCurrent = historyObject.location.pathname.includes(item.path);
return <li key={item.path} className={isCurrent ? "selected" : ""} onClick={() => historyObject.push(item.path)}>
<Heading level={"4"}>{t(item.title)}</Heading>
</li>
}, [t])
const renderMenu = useMemo(() => {
let menuItems = []
if (userHasCommunities){
menuItems = [
{
path: "/portfolio",
title: "pages.portfolio.menu_entry"
},
{
path: "/transactions",
title: "pages.transactions.menu_entry"
},
{
path: "/community",
title: "pages.community.menu_entry"
},
{
path: "/reports",
title: "pages.reports.menu_entry"
}
]
} else {
menuItems = [
{
path: "/portfolio",
title: "pages.portfolio.menu_entry"
},
{
path: "/transactions",
title: "pages.transactions.menu_entry"
},
{
path: "/reports",
title: "pages.reports.menu_entry"
}
]
}
return menuItems.map(i => buildItem(i))
}, [userHasCommunities, buildItem])
return <div className={"menu"}>
<ul>
{renderMenu}
</ul>
</div>
}
export default withTranslation()(Menu)
And my current test file:
import React from "react";
import {shallow} from "enzyme";
import {Menu} from "features/layouts/logged-in/menu/index";
import {historyObject} from "historyObject";
import { keycloak } from "utils/keycloak";
jest.mock("utils/keycloak");
jest.mock("historyObject")
describe("Menu test", () => {
const props = {
t: jest.fn(),
};
beforeEach(() => {
jest.resetAllMocks();
jest.spyOn(React, "useEffect").mockImplementationOnce(x => x()).mockImplementationOnce(x => x()).mockImplementationOnce(x => x()).mockImplementationOnce(x => x());
});
it('should render Menu', () => {
const wrapper = shallow(<Menu {...props} />);
expect(wrapper).toBeDefined();
wrapper.find('li').at(0).prop('onClick')();
expect(historyObject.push).toHaveBeenCalled()
});
it('should render Menu with an object as current', () => {
historyObject.location.pathname = "/portfolio"
const wrapper = shallow(<Menu {...props} />);
expect(wrapper).toBeDefined();
expect(wrapper.find('.selected')).toHaveLength(1);
});
});
Thanks in advance for any advice!

Adyencheckout is not a constructor - NextJS

I'm trying to implement the Adyen dropin payment UI using NextJS but I'm having trouble initializing the Adyen dropin component.
I'm need to dynamically import Adyen web or I get the error window is not defined however, after reading through the NextJS docs, dynamic import creates a component which I can't figure out how to use as a constructor.
I tried the code below but receive the error TypeError: AdyenCheckout is not a constructor
I'm new to NextJS and am at a total loss as to how I should import and initialize Adyen.
Can anyone point me in the right direction?
import Head from 'next/head';
import { useRef, useEffect, useState } from 'react';
import {callServer, handleSubmission} from '../util/serverHelpers';
//dynamic import below. Imports as a component
//import dynamic from 'next/dynamic';
//const AdyenCheckout = dynamic(() => import('#adyen/adyen-web'), {ssr: false});
import '#adyen/adyen-web/dist/adyen.css';
export default function Dropin(){
const dropinContainer = useRef(null);
const [paymentMethods, setPaymentMethods] = useState();
//const [dropinHolder, setDropinHolder] = useState();
//Get payment methods after page render
useEffect( async () => {
const response = await callServer(`${process.env.BASE_URL}/api/getPaymentMethods`);
setPaymentMethods(prev => prev = response);
},[]);
//Adyen config object to be passed to AdyenCheckout
const configuration = {
paymentMethodsResponse: paymentMethods,
clientKey: process.env.CLIENT_KEY,
locale: "en_AU",
environment: "test",
paymentMethodsConfiguration: {
card: {
showPayButton: true,
hasHolderName: true,
holderNameRequired: true,
name: "Credit or debit card",
amount: {
value: 2000,
currency: "AUD"
}
}
},
onSubmit: (state, component) => {
if (state.isValid) {
handleSubmission(state, component, "/api/initiatePayment");
}
},
onAdditionalDetails: (state, component) => {
handleSubmission(state, component, "/api/submitAdditionalDetails");
},
};
//const checkout = new AdyenCheckout(configuration);
const AdyenCheckout = import('#adyen/adyen-web').default;
const adyenCheckout = new AdyenCheckout(configuration);
const dropin = adyenCheckout.create('dropin').mount(dropinContainer.current);
return (
<div>
<Head>
<title>Dropin</title>
</Head>
<div ref={dropin}></div>
</div>
)
}

I was able to resolve the issue by importing the module using the default value inside an async function nested in the useEffect function.
import Head from 'next/head';
import { useRef, useEffect, useState } from 'react';
import {callServer, handleSubmission} from '../util/serverHelpers';
import '#adyen/adyen-web/dist/adyen.css';
export default function Dropin(){
const dropinContainer = useRef();
const [paymentMethods, setPaymentMethods] = useState({});
useEffect(() => {
const init = async () => {
const response = await callServer(`${process.env.BASE_URL}/api/getPaymentMethods`)
.then(setPaymentMethods(response));
console.log(paymentMethods);
const configuration = {
paymentMethodsResponse: paymentMethods,
clientKey: process.env.CLIENT_KEY,
locale: "en_AU",
environment: "test",
paymentMethodsConfiguration: {
card: {
showPayButton: true,
hasHolderName: true,
holderNameRequired: true,
name: "Credit or debit card",
amount: {
value: 2000,
currency: "AUD"
}
}
},
onSubmit: (state, component) => {
if (state.isValid) {
handleSubmission(state, component, "/api/initiatePayment");
}
},
onAdditionalDetails: (state, component) => {
handleSubmission(state, component, "/api/submitAdditionalDetails");
},
};
console.log(configuration.paymentMethodsResponse);
const AdyenCheckout = (await import('#adyen/adyen-web')).default;
const checkout = new AdyenCheckout(configuration);
checkout.create('dropin').mount(dropinContainer.current);
}
init();
},[]);
return (
<div>
<Head>
<title>Dropin</title>
</Head>
<div ref={dropinContainer}></div>
</div>
)
}

React native how to store language in AsyncStorage and change the app language?

I am trying to make a simple React Native app. For the start there is one default language, there is a button, by clicking on it changing the language and reloads the app with the new language. The idea is to store that language in the AsyncStorage (#react-native-async-storage/async-storage).
Here is my cache.js:
import AsyncStorage from '#react-native-async-storage/async-storage';
import moment from 'moment';
const prefix = 'cache';
const expiryInMinutes = 5;
const store = async (key, value) => {
try {
const item = {
value,
timestamp: Date.now()
}
await AsyncStorage.setItem(prefix + key, JSON.stringify(item));
} catch (error) {
// console.log(error);
}
}
const get = async (key) => {
try {
const value = await AsyncStorage.getItem(prefix + key);
const item = JSON.parse(value);
if(!item) return null;
if(isExpired(item)) {
await AsyncStorage.removeItem(prefix + key);
return null;
}
return item.value;
} catch(error) {
// console.log(error);
}
}
const isExpired = (item) => {
const now = moment(Date.now());
const storedTime = item.timestamp;
return now.diff(storedTime, 'minutes') > expiryInMinutes;
}
export default { store, get };
and here is my App.js:
import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import * as Updates from 'expo-updates';
import i18n from './app/locales/locales';
import cache from './app/utility/cache';
export default function App() {
// When a value is missing from a language it'll fallback to another language with the key present.
i18n.fallbacks = true;
i18n.locale = 'de';
cache.get('lang').then(function(result) {
if(result) {
i18n.locale = result;
// console.log("New lang " + result);
}
});
const handleRestart = async () => {
// console.log("Storing lang: ");
// console.log("Reseting lang: ");
cache.store("lang", 'en');
// console.log(cache.get('lang'));
// console.log("Hmm");
// console.log(i18n.locale);
await Updates.reloadAsync();
}
return (
<View style={styles.container}>
<Text>{i18n.t('hello')}</Text>
<Button title="Restart" onPress={handleRestart} />
</View>
);
}
It starts in German, when I press the button it stores the English, but it doesn't change the application language. What am I doing wrong?

I'm think UI is not getting updated, because react re-renders only if props or state gets changed. Since non of those changed, you are not going to see any updated on UI.
try something like this
const [lang, setLang] = React.useState(langValueFromStorage);
const handleRestart = () => {
cache.get('lang').then(function(result) {
if(result) {
i18n.locale = result;
setLang(result)
}
});
}

I have found a solution though it looks a bit hacky. i18n.js:
import AsyncStorage from '#react-native-async-storage/async-storage';
import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import en from './src/localization/en/en.json';
import uz from './src/localization/uz/uz.json';
const resources = {
en: {
translation: en,
},
uz: {
translation: uz,
},
};
const getDefaultLang = async () => {
const storedLang = await AsyncStorage.getItem('lang');
return i18n
.use(initReactI18next)
.init({
resources,
lng: storedLang ? storedLang : 'uz',
interpolation: {
escapeValue: false,
},
fallbackLng: ['uz', 'en'],
});
};
export default getDefaultLang();
There is also a plugin used for detecting lang from asyncstorage which I have just found

How to use setLocale within i18n-js?

I am using i18n-js within my expo project to translate my app.
This is how I configure it:
import React from 'react';
import * as Localization from 'expo-localization';
import i18n from 'i18n-js';
export default function configureI18n(translations) {
i18n.fallbacks = true;
i18n.translations = translations;
i18n.locale = Localization.locale;
const [locale, setLocale] = React.useState(Localization.locale);
const localizationContext = React.useMemo(() => ({
t: (scope, options) => i18n.t(scope, { locale, ...options }),
locale,
setLocale,
}), [locale]);
return localizationContext;
}
I pass this to my AppContext and try to use setLocale within my view:
function HomeView(props) {
const { locale, setLocale } = useContext(AppContext);
return (
<View>
<Button
style={{ marginTop: 4 }}
icon="translate"
mode="contained"
title="toggle navigation"
onPress={() => setLocale(locale.includes('en') ? 'fr' : 'en')}
>
{locale.includes('en') ? 'FR' : 'EN'}
</Button>
</View>
);
}
The function is called, but the text is still in english, what am I doing wrong ?

You need to setup the translation in your top level component, like App.js. Then, you have to create 2 json files: fr.json and en.json in /src/locales/.
Finally, in any screen, you have to import i18n and use the t() function to translate strings.
In App.js
import React, { useEffect, useState } from 'react'
import { loadLocale } from './locales/i18n'
export default function App() {
const [theme, setTheme] = useState(null)
useEffect(() => {
init()
}, [])
const init = async () => {
await loadLocale()
}
return (
<AppContainer />
)
}
In i18n.js
import * as Localization from 'expo-localization'
import i18n from 'i18n-js'
i18n.defaultLocale = 'fr'
i18n.locale = 'fr'
i18n.fallbacks = true
export const loadLocale = async () => {
for (const locale of Localization.locales) {
if (i18n.translations[locale.languageCode] !== null) {
i18n.locale = locale.languageCode
switch (locale.languageCode) {
case 'en':
import('./en.json').then(en => {
i18n.translations = { en }
})
break
default:
case 'fr':
import('./fr.json').then(fr => {
i18n.translations = { fr }
})
break
}
break
}
}
}
export default i18n
In HomeView.js
import React from 'react'
import i18n from '../locales/i18n'
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1 }}>
<Text>{i18n.t('home.welcome')}</Text>
<Text>{i18n.t('home.content')}</Text>
</View>
)
}
export default HomeView
In fr.json
{
"home": {
"welcome": "Bienvenue",
"content": "Du contenu ici"
}
}

In order to change between languages and avoid getting [missing "X.string" translation] error you can add a function like this "changeLanguage" function below:
// Imagine you have spanish and english languages support
import es from './locales/es';
import en from './locales/en';
const availableTranslations = {
es,
en
};
/* This function is useful to load spanish or english language translations and set the corresponding locale */
const changeLanguage = (languageCode) => {
I18n.translations = {
[languageCode]: availableTranslations[languageCode]
};
I18n.locale = languageCode;
};

Testing a Redux connected Typescript file

I'm trying to test a connected TSX component. I have tested connected components before and I exactly know how to implement it, but seems like there is some issue in the way that jest and typescript interact.
What I have tried ?
I have exported an unconnected component for testing purposes
I have created a mock store and wrapper the component around a provider in the test file
I have modified jest.config.js as suggest by the error
I keep getting the same error!
Cannot find module 'react' from 'Provider.js'
However, Jest was able to find:
'components/Provider.js'
You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', 'node'].
See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string
However, Jest was able to find:
'./App.test.tsx'
'./App.tsx'
You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', 'node'].
See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)
at Object.<anonymous> (../node_modules/react-redux/lib/components/Provider.js:10:38)
My component is as below (App.tsx):
import React from "react";
import { connect } from "react-redux";
import { Album, Photo, fetchAlbums, fetchPhotos } from "../actions";
import { StoreState } from "../reducers";
// *Notice: in this file we have used React.UseEffect and React.UseState instead of importing
// hooks directly from React. That's for the reasons of testing and how Enzyme has not yet adopted
// very well with hooks.
// the type of your action creators has been intentionally set to "any", as typescript does not play well with redux-thunk
interface AppProps {
albums?: Album[];
photos?: Photo[];
fetchAlbums?(): any;
fetchPhotos?(id: number): any;
}
export const _App = ({
albums,
photos,
fetchAlbums,
fetchPhotos
}: AppProps) => {
// setting the initial state of the loader and thmbnail
const [fetching, setFetching] = React.useState(false);
const [image, setImage] = React.useState();
// setting the state back to false once our data updates
React.useEffect(() => {
setFetching(false);
}, [albums, photos]);
// click evnet handler
const ClickHandler = (): void => {
fetchAlbums();
setFetching(true);
};
// album entry event handler
const AlbumClickHandler = (id: number): void => {
fetchPhotos(id);
};
const display = (id: number): JSX.Element[] => {
const relevantThumbs = photos.filter(photo => photo.albumId === id);
return relevantThumbs.map((thumb, idx) => {
return (
<img
onClick={() => setImage(thumb.id)}
key={idx}
alt={thumb.title}
src={image === thumb.id ? thumb.url : thumb.thumbnailUrl}
></img>
);
});
};
// helper function to render jsx elements
const renderList = (): JSX.Element[] =>
albums.map(album => (
<div className="albums" key={album.id}>
<h2 onClick={() => AlbumClickHandler(album.id)}>{album.title}</h2>
{display(album.id).length !== 0 ? (
<div className="albums__thumbnails">{display(album.id)}</div>
) : null}
</div>
));
return (
<section className="container">
<button className="container__button" onClick={() => ClickHandler()}>
Fetch Albums
</button>
{/* conditionally rendering the loader */}
{fetching ? "loading" : null}
{renderList()}
</section>
);
};
const mapStateToProps = ({
albums,
photos
}: StoreState): { albums: Album[]; photos: Photo[] } => {
return { albums, photos };
};
export default connect(mapStateToProps, { fetchAlbums, fetchPhotos })(_App);
and here is my test file (App.test.tsx):
import React from "react";
import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import { findByClass } from "../test/Utils";
import App from "./App";
Enzyme.configure({ adapter: new Adapter() });
// setting our initial mount, we use mount here bcause of the hooks
const setup = () => mount(<App />);
describe("app", () => {
it("renders succesfully", () => {
// Arrange
const wrapper = setup();
const component = findByClass(wrapper, "container");
// Assert & Act
expect(component.length).toBe(1);
});
});
What am I missing ?