Miałem plik z jedną funkcją, która tworzy axiosInstance, kiedyś wyglądał tak:

import Axios from 'axios';
import getToken from '@/api/auth-token';

const [apiUrl] = [window.variables.apiUrl];

export const createApiInstance = () => {
    return Axios.create({
        baseURL: `${apiUrl}`,
        headers: {
            Authorization: `Bearer ${getToken()}`,
        },
    });
};

Chcieliśmy zaimplementować powiadomienie użytkownika, gdy jego token JWT wygaśnie (aby nieświadomie nie kontynuował korzystania z aplikacji, gdy wszystkie ich żądania zwracają 401). Moje rozwiązanie zamieniło ten plik na następujący:

import Axios from 'axios';
import getToken from '@/api/auth-token';
import store from '@/main.jsx';
import { userActionCreators } from '@/store/action-creators';

const [apiUrl] = [window.variables.apiUrl];

export const createApiInstance = (urlExtension = '') => {
    const axiosInstance = Axios.create({
        baseURL: `${apiUrl + urlExtension}`,
        headers: {
            Authorization: `Bearer ${getToken()}`,
        },
    });
    axiosInstance.interceptors.response.use(response => {
        if (response.status === 401)
            store.dispatch(userActionCreators.setUserTokenExpired());
        return response;
    });
    return axiosInstance;
};

Działało to bardzo dobrze, ponieważ teraz wszystkie odpowiedzi z interfejsu API są sprawdzane pod kątem stanu 401 nieautoryzowanego i wysyłają akcję, aby aplikacja mogła na nią odpowiedzieć.

Nie lubi import store, więc 95% testów w aplikacji kończy się niepowodzeniem, gdy sklep jest tu importowany. Jestem pewien, że jest to importowanie sklepu, ponieważ każdy test przechodzi, gdy jest komentowany.

Nie miałem absolutnie żadnego szczęścia, żeby cokolwiek zadziałało. Próbowałem zaktualizować ustawienia jest i babel-jest do tych samych wersji, ustawiając react, react-dom i react-test-renderer na te same wersje. Zajrzałem do konfiguracji moduleNameMapper, aby mockować sklep w konfiguracji jest w package.json, ale nie jestem pewien, jak to działa. Zaczynam rozważać zupełnie inne podejście do tego problemu, na przykład zastosowanie oprogramowania pośredniczącego w celu sprawdzenia odpowiedzi 401, ale martwię się, że po wielu pracach napotkam ten sam problem.

Problem z mockowaniem sklepu w samych plikach testowych polega na tym, że w tej dużej aplikacji są setki plików testowych, więc dosłownie wszystko oprócz dodawania mockowania do każdego pojedynczego pliku jest rozwiązaniem, którego szukam.

0
Jeremy Dahms 20 grudzień 2019, 01:44

2 odpowiedzi

Najlepsza odpowiedź

Jeśli ktoś inny ma ten problem, stało się tak, ponieważ eksportowałem store z tego samego pliku co mój ReactDOM.render. Najwyraźniej możesz eksportować z tego pliku, ale jak tylko spróbujesz zaimportować to, co jest wyeksportowane gdzie indziej, złapie to i zepsuje testy. Rozwiązaniem jest utworzenie i wyeksportowanie store z innego pliku.

0
Jeremy Dahms 29 styczeń 2020, 20:12

Upewnij się, że masz plik .babelrc, ponieważ w przeciwnym razie nie rozumie kontekstu plików babel i JSX. Powiązane pytanie stosu

Jeśli to nie wystarczy, możesz zaktualizować kod main.jsx i dać mi znać, a następnie zaktualizuję

0
Community 20 czerwiec 2020, 12:12
Cześć, mam plik .babelrc, który wygląda tak { "presets": [ [ "@babel/preset-env", { "useBuiltIns": "entry" } ], "@babel/preset-react" ], "plugins": [ "@babel/plugin-proposal-class-properties", ], } Nie jestem jeszcze zbyt zaznajomiony z plikami babelrc, ale myślę, że to powinno działać, daj mi znać, jeśli zauważysz, że coś brakuje lub jest niepoprawne.
 – 
Jeremy Dahms
6 styczeń 2020, 19:16