Website-Suche

reactjs - Jest ReferenceError: Kann nicht auf '_default' vor der Initialisierung zugegriffen werden

Ich habe einen seltsamen Fehler beim Testen meiner Redux-Toolkit-Komponente mit Jest festgestellt. Ich verwende NextJS als mein React-Framework, kann aber irgendwie die Darstellung einer Komponente in Jest nicht überwinden. Ich habe meinen eigenen Renderer für Tests folgendermaßen eingerichtet

import React from 'react';
import { render as rtlRender } from '@testing-library/react';
import { Provider } from 'react-redux';
import { store } from '../../@core/state/store'


const render = (
  ui:any, {
    initialState = {...store.getState()},
    ...renderOptions
  } = {}
) => {
  const Wrapper = ({ children } : any) => (
    <Provider store={store}>{children}</Provider>
  );
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions});
};

export *  from '@testing-library/react';
export { render};

und ich habe mein Slice so eingerichtet

export const AuthSlice = createSlice({
    name: "auth",
    initialState,
    reducers: {
        started: (state) => {
            state.status = 'pending'
        },
        success: (state, { payload }: PayloadAction<User | null>) => {
            state.status = 'successful'
            state.user = payload
        },
        reset: (state) => {
            state.status = 'idle'
        },
        failed: (state, payload: PayloadAction<string>) => {
            state.status = 'failed'
            state.message = payload.payload
        }
    },

})

export const { started, success, failed, reset } = AuthSlice.actions

export default AuthSlice.reducer

In meinem Test habe ich einen einfachen Test wie diesen

import ForgotPassword from "../../components/Authentication/forgot-password";
import "@testing-library/jest-dom";
import { render, screen, fireEvent } from "../utils";
describe("Forgot Password Component", () => {
it("it should render the input field", () => {
    
    render(<ForgotPassword />);

  })
});

Aber wann immer ich den Test ausführe, erhalte ich diesen Fehler

ReferenceError: Cannot access '_default' before initialization

      135 | export const { started, success, failed, reset } = AuthSlice.actions
      136 |
    > 137 | export default AuthSlice.reducer
          | ^
      138 |

Ich habe mehrere Recherchen und Korrekturen durchgeführt, konnte es aber nicht beheben. Wenn ich das Rendern aus dem Test entferne, funktioniert alles einwandfrei.

Übrigens, das ist meine Store-Konfiguration

import { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist'
import storage from "redux-persist/lib/storage";
import reducers from "./reducers";
import { configureStore } from "@reduxjs/toolkit";

const persistConfig = {
    key: 'my-store',
    storage
}

const persistedReducer = persistReducer(persistConfig, reducers)

export const store = configureStore({
    reducer: persistedReducer,
    middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
})

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export const persistor = persistStore(store);

Jede Hilfe wird geschätzt

Verwandte Artikel