Cypress -Komponententests liefert einen Fehler bei der RTK -Abfrage `api`
Posted: 11 Feb 2025, 06:58
Beim Versuch, Komponententests in Cypress auszuführen, erhalte ich diesen Fehler: < /p>
Es stammt von meinem Redux Store -Konfigurationsdatei Store/index.ts :
import { configureStore } from '@reduxjs/toolkit';
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import { api } from './api/api';
import { sendErrorToSentryMiddleware } from './middlewares/sentry';
import { unauthenticateMiddleware } from './middlewares/unauthenticate';
import { debugReducer } from './reducers/debug';
import { loginPageErrorsReducer } from './reducers/errorMessages/loginPageErrors';
import { securityPageErrorsReducer } from './reducers/errorMessages/securityPageErrors';
import { profileReducer } from './reducers/profile';
import { reauthReducer } from './reducers/reauth/reauth';
import { shareReservationReducer } from './reducers/sharereservation';
const store = configureStore({
reducer: {
profile: profileReducer,
securityPageErrors: securityPageErrorsReducer,
loginPageErrors: loginPageErrorsReducer,
reauth: reauthReducer,
shareReservation: shareReservationReducer,
debug: debugReducer,
[api.reducerPath]: api.reducer, // line that triggers the error
},
preloadedState: {},
middleware: getDefaultMiddleware =>
getDefaultMiddleware().concat([
api.middleware,
unauthenticateMiddleware,
sendErrorToSentryMiddleware,
]),
enhancers: getDefaultEnhancers => {
return getDefaultEnhancers().concat(sentryReduxEnhancer);
},
});
< /code>
Es scheint also, dass Cypress einfach die gesamte Projektcodebasis kopiert, um seine Tests auszuführen. Ich brauche den Redux -Store jedoch nicht, um einen der Komponententests auszuführen. Gibt es eine Möglichkeit, dies zu beheben ? JS PrettyPrint-Override ">import { configureStore } from '@reduxjs/toolkit';
import { mount } from 'cypress/react';
import React from 'react';
import { Provider } from 'react-redux';
import SellCalculator from '../../src/components/pages/funds/SellCalculator';
import { ModalContext } from '../../src/context/modalContext';
import { api } from '../../src/store/api/api';
describe('SellCalculator', () => {
const defaultProps = {
sharePrice: 100,
totalShares: 15,
onChange: cy.stub().as('onChangeSpy'),
};
const store = configureStore({
reducer: {
[api.reducerPath]: api.reducer,
},
middleware: getDefaultMiddleware =>
getDefaultMiddleware({
serializableCheck: false,
}),
});
const mountWithContext = (props = defaultProps) => {
const setModal = cy.stub().as('setModalSpy');
mount(
{},
}}
>
);
};
it('renders with initial values', () => {
mountWithContext();
cy.contains('Share price (USD)').should('be.visible');
cy.contains('$100').should('be.visible');
cy.contains('Sell price (USD)').should('be.visible');
cy.contains('$100').should('be.visible'); // Initial value is 1 share
});
});
< /code>
Gibt es eine Möglichkeit, dies zu beheben? Idealerweise möchte ich, dass Cypress nur die Dateien verwendet, die für die getesteten Komponenten relevant sind
Code: Select all
The following error originated from your test code, not from Cypress.
> Cannot access 'api' before initialization
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.
import { configureStore } from '@reduxjs/toolkit';
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import { api } from './api/api';
import { sendErrorToSentryMiddleware } from './middlewares/sentry';
import { unauthenticateMiddleware } from './middlewares/unauthenticate';
import { debugReducer } from './reducers/debug';
import { loginPageErrorsReducer } from './reducers/errorMessages/loginPageErrors';
import { securityPageErrorsReducer } from './reducers/errorMessages/securityPageErrors';
import { profileReducer } from './reducers/profile';
import { reauthReducer } from './reducers/reauth/reauth';
import { shareReservationReducer } from './reducers/sharereservation';
const store = configureStore({
reducer: {
profile: profileReducer,
securityPageErrors: securityPageErrorsReducer,
loginPageErrors: loginPageErrorsReducer,
reauth: reauthReducer,
shareReservation: shareReservationReducer,
debug: debugReducer,
[api.reducerPath]: api.reducer, // line that triggers the error
},
preloadedState: {},
middleware: getDefaultMiddleware =>
getDefaultMiddleware().concat([
api.middleware,
unauthenticateMiddleware,
sendErrorToSentryMiddleware,
]),
enhancers: getDefaultEnhancers => {
return getDefaultEnhancers().concat(sentryReduxEnhancer);
},
});
< /code>
Es scheint also, dass Cypress einfach die gesamte Projektcodebasis kopiert, um seine Tests auszuführen. Ich brauche den Redux -Store jedoch nicht, um einen der Komponententests auszuführen. Gibt es eine Möglichkeit, dies zu beheben ? JS PrettyPrint-Override ">import { configureStore } from '@reduxjs/toolkit';
import { mount } from 'cypress/react';
import React from 'react';
import { Provider } from 'react-redux';
import SellCalculator from '../../src/components/pages/funds/SellCalculator';
import { ModalContext } from '../../src/context/modalContext';
import { api } from '../../src/store/api/api';
describe('SellCalculator', () => {
const defaultProps = {
sharePrice: 100,
totalShares: 15,
onChange: cy.stub().as('onChangeSpy'),
};
const store = configureStore({
reducer: {
[api.reducerPath]: api.reducer,
},
middleware: getDefaultMiddleware =>
getDefaultMiddleware({
serializableCheck: false,
}),
});
const mountWithContext = (props = defaultProps) => {
const setModal = cy.stub().as('setModalSpy');
mount(
{},
}}
>
);
};
it('renders with initial values', () => {
mountWithContext();
cy.contains('Share price (USD)').should('be.visible');
cy.contains('$100').should('be.visible');
cy.contains('Sell price (USD)').should('be.visible');
cy.contains('$100').should('be.visible'); // Initial value is 1 share
});
});
< /code>
Gibt es eine Möglichkeit, dies zu beheben? Idealerweise möchte ich, dass Cypress nur die Dateien verwendet, die für die getesteten Komponenten relevant sind