I have error when combine appWithTranslation and PersistGate:
Unhandled Runtime Error
NotFoundError: The object can not be found here.
My code:
import { appWithTranslation } from 'next-i18next'
import { Provider } from 'react-redux'
import { persistStore } from 'redux-persist'
import { PersistGate } from 'redux-persist/integration/react'
import { useStore } from '../store'
const MyApp = ({ Component, pageProps }) => {
const store = useStore(pageProps.initialReduxState)
const persistor = persistStore(store, {}, () => { persistor.persist() })
return (
<Provider store={store}>
<PersistGate loading={<div>loading</div>} persistor={persistor}>
<Component { ...pageProps } />
</PersistGate>
</Provider>
)
}
export default appWithTranslation(MyApp)
Firstly it loading successfully, but when I change locale I get error.
And no traceback! Just stops working -- components are not displayed, only loading (from PersistGate)
Related
I have created a nextjs page and inside the page, there is getServerSideProps that calls API to fetch data.
The problem is that getServerSideProps never calls API and returns a response error 403 Unauthorized
nextjs is serving data from .next folder and returns a JSON response and instead of calling API it calls this URL http://localhost:3000/_next/data/development/contacts.json
This is my code
import React, { useState, useEffect } from "react"
import {
Card,
CardHeader,
CardFooter,
Container,
Row,
Button
} from "reactstrap"
import AdminLayout from "../components/layouts/AdminLayout"
import PropTypes from "prop-types"
import TablePagination from "../components/common/TablePagination"
import { fetchData } from "../api"
import { toast } from "react-toastify"
import { useSession } from "../context/SessionContext"
import ProtectPage from "../hocs/ProtectPage"
import { getContacts } from "../api/contacts"
import ContactsTable from "../components/contacts/ContactsTable"
const Contacts = ({ initialContacts, initialPagination, error }) => {
const [contacts, setContacts] = useState(initialContacts)
const [pagination, setPagination] = useState(initialPagination)
const session = useSession()
const handlePagination = async (page) => {
fetchData({
apiMethod: () => getContacts({ page }),
callback: (res, error) => {
if (error || !res) {
toast("Error loading Contacts")
} else {
setContacts(res.data)
setPagination(res.pagination)
}
session.loadingQueue.dequeue()
}
})
}
useEffect(() => {
setContacts(initialContacts)
setPagination(initialPagination)
}, [initialContacts, initialPagination])
return (
<AdminLayout>
{/* Page content */}
<Container className="mt--7" fluid>
<Row>
<div className="col">
<Card className="shadow">
<CardHeader className="border-0">
<Row className="justify-content-between w-100 m-0">
<h3 className="mb-0">Contacts</h3>
</Row>
</CardHeader>
<ContactsTable contacts={contacts ?? []} />
<CardFooter className="py-4">
<TablePagination
{...pagination}
handlePagination={handlePagination}
/>
</CardFooter>
</Card>
</div>
</Row>
</Container>
</AdminLayout>
)
}
Contacts.propTypes = {
initialContacts: PropTypes.array.isRequired,
initialPagination: PropTypes.object.isRequired
}
export async function getServerSideProps(ctx) {
try {
const contactsRes = await getContacts({})
const { data: initialContacts, pagination: initialPagination } =
contactsRes.data
return {
props: {
initialContacts,
initialPagination
}
}
} catch (error) {
return {
props: {
initialContacts: [],
initialPagination: {},
error: true
}
}
}
}
export default ProtectPage(Contacts)
I tried to disable cache and nothing worked. still serving JSON files.
console.log(contactsRes) in getServerSideProps
Or
call your api from getServerSideProps (await fetch(your_path))
I am learning about context API. reducer.js:
export const initialState = {
user: null,
playlist: [],
playing: false,
item: null
};
const reducer = (state, action) => {
console.log(action);
switch(action.type) {
case 'SET_USER':
return {
...state,
user: action.user
}
default:
return state;
}
}
export default reducer;
DataLayer.js:
import React, {createContext, useContext, useReducer} from "react";
export const DataLayerContext = createContext();
export const DataLayer = ({initialState, reducer, children}) => {
<DataLayerContext.Provider value={useReducer(reducer, initialState)}>
{children}
</DataLayerContext.Provider>
};
now I am wrapping my App component around it in the index.js file
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { DataLayer } from './DataLayer';
import reducer, { initialState } from './reducer';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
// <React.StrictMode>
<DataLayer initialState={initialState} reducer={reducer}>
<App />
</DataLayer>
// </React.StrictMode>
);
reportWebVitals();
but after doing this on the browser it display nothing no error not a single component that I have created is displayed but when I unwrapped the component it works fine
I also encountered the same issue and this is what worked for me …
The component (DataLayer.js) is not returning anything, so you have to change it from this:
export const DataLayer = ({initialState, reducer, children}) => {
<DataLayerContext.Provider value={useReducer(reducer, initialState)}>
{children}
</DataLayerContext.Provider>
};
to this:
export const DataLayer = ({ initialState, reducer, children }) => {
return (
<DataLayerContext.Provider value={useReducer(reducer, initialState)}>
{children}
</DataLayerContext.Provider>
)
};
I was trying to display an array of data fetched from my custom server with RTK Query using Next.js (React framework). And this is my first time using RTK Query. Whenever I console.log the data, it appears in the browser console. But whenever I try to map the data to render it in the browser, it keeps throwing an error saying Cannot read properties of undefined (reading 'map').
I figured Next.js always throws an error if an initial state is undefined or null even if the state change. This link talked about solving the problem using useMemo hook https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics
But I didn't understand it well. Please kindly help me out with displaying the data.
Here is the BaseQuery function example I followed, it was derived from redux toolkit docmentation https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#axios-basequery
import axios from "axios";
const axiosBaseQuery =
({ baseUrl } = { baseUrl: "" }) =>
async ({ url, method, data }) => {
try {
const result = await axios({ url: baseUrl + url, method, data });
return { data: result.data };
} catch (axiosError) {
let err = axiosError;
return {
error: { status: err.response?.status, data: err.response?.data },
};
}
};
export default axiosBaseQuery;
I make the GET request here
import { createApi } from "#reduxjs/toolkit/query/react";
import axiosBaseQuery from "./axiosBaseQuery";
export const getAllCarsApi = createApi({
reducerPath: "getAllCarsApi",
baseQuery: axiosBaseQuery({
baseUrl: "http://localhost:5000/",
}),
endpoints(build) {
return {
getAllCars: build.query({
query: () => ({ url: "all-cars", method: "get" }),
}),
};
},
});
export const { useGetAllCarsQuery } = getAllCarsApi;
This is my redux store
import { configureStore } from "#reduxjs/toolkit";
import { getAllCarsApi } from "./getAllCarsApi";
import { setupListeners } from "#reduxjs/toolkit/dist/query";
const store = configureStore({
reducer: { [getAllCarsApi.reducerPath]: getAllCarsApi.reducer },
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(getAllCarsApi.middleware),
});
setupListeners(store.dispatch);
export default store;
I provide the store to the _app.js file.
import "../styles/globals.css";
import axios from "axios";
import { MyContextProvider } from "#/store/MyContext";
import { Provider } from "react-redux";
import store from "#/store/ReduxStore/index";
axios.defaults.withCredentials = true;
function MyApp({ Component, pageProps }) {
return (
<MyContextProvider>
<Provider store={store}>
<Component {...pageProps} />
</Provider>
</MyContextProvider>
);
}
export default MyApp;
I get the data here in my frontend.
import { useGetAllCarsQuery } from "#/store/ReduxStore/getAllCarsApi";
const theTest = () => {
const { data, isLoading, error } = useGetAllCarsQuery();
return (
<div>
{data.map((theData, i) => (
<h1 key={i}>{theData}</h1>
))}
<h1>Hello</h1>
</div>
);
};
export default theTest;
This is a timing thing.
Your component will always render immediately and it will not defer rendering until data is there. That means it will also render before your data has been fetched. So while the data is still loading, data is undefined - and you try to map over that.
You could do things like just checking if data is there to deal with that:
const theTest = () => {
const { data, isLoading, error } = useGetAllCarsQuery();
return (
<div>
{data && data.map((theData, i) => (
<h1 key={i}>{theData}</h1>
))}
<h1>Hello</h1>
</div>
);
};
Testing libs...always fun. I am using next-i18next within my NextJS project. We are using the useTranslation hook with namespaces.
When I run my test there is a warning:
console.warn
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
> 33 | const { t } = useTranslation(['common', 'account']);
| ^
I have tried the setup from the react-i18next test examples without success. I have tried this suggestion too.
as well as just trying to mock useTranslation without success.
Is there a more straightforward solution to avoid this warning? The test passes FWIW...
test('feature displays error', async () => {
const { findByTestId, findByRole } = render(
<I18nextProvider i18n={i18n}>
<InviteCollectEmails onSubmit={jest.fn()} />
</I18nextProvider>,
{
query: {
orgId: 666,
},
}
);
const submitBtn = await findByRole('button', {
name: 'account:organization.invite.copyLink',
});
fireEvent.click(submitBtn);
await findByTestId('loader');
const alert = await findByRole('alert');
within(alert).getByText('failed attempt');
});
Last, is there a way to have the translated plain text be the outcome, instead of the namespaced: account:account:organization.invite.copyLink?
Use the following snippet before the describe block OR in beforeEach() to mock the needful.
jest.mock("react-i18next", () => ({
useTranslation: () => ({ t: key => key }),
}));
Hope this helps. Peace.
use this for replace render function.
import { render, screen } from '#testing-library/react'
import DarkModeToggleBtn from '../../components/layout/DarkModeToggleBtn'
import { appWithTranslation } from 'next-i18next'
import { NextRouter } from 'next/router'
jest.mock('react-i18next', () => ({
I18nextProvider: jest.fn(),
__esmodule: true,
}))
const createProps = (locale = 'en', router: Partial<NextRouter> = {}) => ({
pageProps: {
_nextI18Next: {
initialLocale: locale,
userConfig: {
i18n: {
defaultLocale: 'en',
locales: ['en', 'fr'],
},
},
},
} as any,
router: {
locale: locale,
route: '/',
...router,
},
} as any)
const Component = appWithTranslation(() => <DarkModeToggleBtn />)
const defaultRenderProps = createProps()
const renderComponent = (props = defaultRenderProps) => render(
<Component {...props} />
)
describe('', () => {
it('', () => {
renderComponent()
expect(screen.getByRole("button")).toHaveTextContent("")
})
})
I used a little bit more sophisticated approach than mocking to ensure all the functions work the same both in testing and production environment.
First, I create a testing environment:
// testing/env.ts
import i18next, { i18n } from "i18next";
import JSDomEnvironment from "jest-environment-jsdom";
import { initReactI18next } from "react-i18next";
declare global {
var i18nInstance: i18n;
}
export default class extends JSDomEnvironment {
async setup() {
await super.setup();
/* The important part start */
const i18nInstance = i18next.createInstance();
await i18nInstance.use(initReactI18next).init({
lng: "cimode",
resources: {},
});
this.global.i18nInstance = i18nInstance;
/* The important part end */
}
}
I add this environment in jest.config.ts:
// jest.config.ts
export default {
// ...
testEnvironment: "testing/env.ts",
};
Sample component:
// component.tsx
import { useTranslation } from "next-i18next";
export const Component = () => {
const { t } = useTranslation();
return <div>{t('foo')}</div>
}
And later on I use it in tests:
// component.test.tsx
import { setI18n } from "react-i18next";
import { create, act, ReactTestRenderer } from "react-test-renderer";
import { Component } from "./component";
it("renders Component", () => {
/* The important part start */
setI18n(global.i18nInstance);
/* The important part end */
let root: ReactTestRenderer;
act(() => {
root = create(<Component />);
});
expect(root.toJSON()).toMatchSnapshot();
});
I figured out how to make the tests work with an instance of i18next using the renderHook function and the useTranslation hook from react-i18next based on the previous answers and some research.
This is the Home component I wanted to test:
import { useTranslation } from 'next-i18next';
const Home = () => {
const { t } = useTranslation("");
return (
<main>
<div>
<h1> {t("welcome", {ns: 'home'})}</h1>
</div>
</main>
)
};
export default Home;
First, we need to create a setup file for jest so we can start an i18n instance and import the translations to the configuration. test/setup.ts
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import homeES from '#/public/locales/es/home.json';
import homeEN from '#/public/locales/en/home.json';
i18n.use(initReactI18next).init({
lng: "es",
resources: {
en: {
home: homeEN,
},
es: {
home: homeES,
}
},
fallbackLng: "es",
debug: false,
});
export default i18n;
Then we add the setup file to our jest.config.js:
setupFilesAfterEnv: ["<rootDir>/test/setup.ts"]
Now we can try our tests using the I18nextProvider and the useTranslation hook:
import '#testing-library/jest-dom/extend-expect';
import { cleanup, render, renderHook } from '#testing-library/react';
import { act } from 'react-dom/test-utils';
import { I18nextProvider, useTranslation } from 'react-i18next';
import Home from '.';
describe("Index page", (): void => {
afterEach(cleanup);
it("should render properly in Spanish", (): void => {
const t = renderHook(() => useTranslation());
const component = render(
<I18nextProvider i18n={t.result.current.i18n}>
<Home / >
</I18nextProvider>
);
expect(component.getByText("Bienvenido a Pocky")).toBeInTheDocument();
});
it("should render properly in English", (): void => {
const t = renderHook(() => useTranslation());
act(() => {
t.result.current.i18n.changeLanguage("en");
});
const component = render(
<I18nextProvider i18n={t.result.current.i18n}>
<Home/>
</I18nextProvider>
);
expect(component.getByText("Welcome to Pocky")).toBeInTheDocument();
});
});
Here we used the I18nextProvider and send the i18n instance using the useTranslation hook. after that the translations were loaded without problems in the Home component.
We can also change the selected language running the changeLanguage() function and test the other translations.
I want to test Vibration module of react-native, the problem is that I get an error when I try to test it:
With this component:
import React, { useEffect } from 'react';
import { Text, Vibration } from 'react-native';
interface Props {}
export const MyComponent = (props: Props) => {
useEffect(() => Vibration.vibrate(1), []);
return (
<Text>asdaf</Text>
);
};
And this test file:
// #ts-nocheck
import React from 'react';
import { render } from '#testing-library/react-native';
import { NativeModules } from 'react-native';
import { MyComponent } from '../../../src/modules/MyComponent';
describe('MyComponent', () => {
it('alpha', () => {
const { debug } = render(<MyComponent/>);
expect(true).toBeTruthy();
});
});
I get this error:
Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'Vibration' could not be found. Verify that a module by this name is registered in the native binary.
I tried to mock react-native like this:
// #ts-nocheck
import React from 'react';
import { render } from '#testing-library/react-native';
import { NativeModules } from 'react-native';
import { ChatRoomContainer } from '../../../src/modules/ChatRoom';
// Mock NativeModules
jest.mock('react-native', () => ({
...jest.requireActual('react-native'),
Vibration: {
vibrate: jest.fn()
},
__esModule: true
}));
describe('MyComponent', () => {
it('alpha', () => {
const { debug } = render(<ChatRoomContainer/>);
expect(true).toBeTruthy();
});
});
But then I get a ton of warnings related to old modules that should no longer be used:
Warning: CheckBox has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '#react-native-community/checkbox' instead of 'react-native'. See https://github.com/react-native-community/react-native-checkbox
Warning: DatePickerIOS has been merged with DatePickerAndroid and will be removed in a future release. It can now be installed and imported from '#react-native-community/datetimepicker' instead of 'react-native'. See https://github.com/react-native-community/datetimepicker
What is the best way to test such functionality (like Vibration) of react-native then?
Thanks in advance for you time!
You can mock react-native using the library path, like this:
const mockedVibrate = jest.fn();
jest.mock('react-native/Libraries/Vibration/Vibration', () => ({
vibrate: mockedVibrate,
}));