Boi Stance
Boi Stance

Reputation: 17

Can't setup MSW for testing with Vitest and React Testing Library

When running the test, I'm getting an error: Error: No known conditions for "./browser" specifier in "msw" package. But nor the test neither the component doesn't use MSW.

The test:

import {render} from "@testing-library/react";
import {ProjectsPage} from "@pages/projects";

describe('page-wrapper', () => {
    test('renders', () => {
        const {} = render(<ProjectsPage/>);
    });
});

The component:

import {useEffect, useReducer} from "react";
import {PageWrapper} from "@shared/ui/page-wrapper";
import {useGetProjectsQuery} from "@entities/project";
import {Actions, initialState, projectsPageReducer, setDataSource, Table} from "@pages/projects";

export function ProjectsPage() {
    const {data, isLoading} = useGetProjectsQuery();
    const [state, dispatch] = useReducer(projectsPageReducer, initialState);

    useEffect(() => {
        if (data) {
            dispatch(setDataSource(data));
        }
    }, [data]);

    return (
        <PageWrapper crumbs={[{title: 'Проекты'}]}>
            <Actions state={state} dispatch={dispatch} unfilteredData={data}/>

            <Table state={state} isLoading={isLoading}/>
        </PageWrapper>
    )
}

Running the test result in error:

Error: No known conditions for "./browser" specifier in "msw" package
    at e (file:///home/petr/%D0%94%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B/prog/study/front/project-tracker/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:45979:25)
    at n (file:///home/petr/%D0%94%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B/prog/study/front/project-tracker/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:45979:646)
    at o (file:///home/petr/%D0%94%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B/prog/study/front/project-tracker/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:45979:1297)
    at resolveExportsOrImports (file:///home/petr/%D0%94%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B/prog/study/front/project-tracker/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:46600:18)
    at resolveDeepImport (file:///home/petr/%D0%94%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B/prog/study/front/project-tracker/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:46623:25)
    at tryNodeResolve (file:///home/petr/%D0%94%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B/prog/study/front/project-tracker/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:46388:16)
    at ResolveIdContext.resolveId (file:///home/petr/%D0%94%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B/prog/study/front/project-tracker/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:46138:19)
    at PluginContainer.resolveId (file:///home/petr/%D0%94%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B/prog/study/front/project-tracker/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:48953:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async TransformPluginContext.resolve (file:///home/petr/%D0%94%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B/prog/study/front/project-tracker/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:49113:15)

MSW setup:

src/app/mocks/browser.ts

import {setupWorker} from "msw/browser";

export const worker = setupWorker();

src/app/mocks/enable-mocking.ts

export async function enableMocking() {
    if (process.env.NODE_ENV === 'production') {
        return
    }

    const {worker} = await import('./browser');

    return worker.start();
}

src/app/root.tsx

enableMocking().then(() => {
    createRoot(document.getElementById("root")!).render(
        <Providers>
            <Routes/>
        </Providers>
    );
});

mockServiceWorker.js is situated in public/mockServiceWorker.js

How can I fix the problem?

Upvotes: 0

Views: 269

Answers (0)

Related Questions