Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

ts-jest - Jest failed to parse a file -- jest.config.is configured correctly from what I can tell?

I know this has been asked a few times, but none of the solutions work for me. I am using ts-jest but receiving the following error when I run my tests:

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
/Users/jamie/Desktop/dev/coral/src/__test__/LoginForm.test.tsx:19
        const loginSetup = (0, testUtils_1.render)(<react_redux_1.Provider store={store_1.default}>
    SyntaxError: Unexpected token '<'
I have been stuck on this for days and have ended up commenting out the test step in my build pipeline just to get it to build and deploy(!).
Here is the test file and the jest.config.js file:
LoginForm.test.tsx
import LoginForm from '@/pages/auth/login/components/LoginForm';
import userEvent from '@testing-library/user-event';
import store from '@/utils/store';
import { Provider } from 'react-redux';
import { act, cleanup, fireEvent, render, waitFor } from './testUtils';
const setup = () => {
    const loginSetup = render(
        <Provider store={store}>
            <LoginForm />
        </Provider>
    const loginForm = loginSetup.getByRole('form', { name: /login-form/i });
    const emailField = loginSetup.getByRole('textbox', { name: /email/i });
    const passwordField = loginSetup.getByPlaceholderText(/Password/i);
    const submitButton = loginSetup.getByRole('button', { name: /submit/i });
    return {
        loginSetup,
        loginForm,
        emailField,
        passwordField,
        submitButton,
        ...loginSetup
const mockLogin = jest.fn();
const mockQueryParams = jest.fn();
const mockSocialLogin = jest.fn();
jest.mock('@/hooks/auth', () => ({
    useLogin: (): any => mockLogin,
    useSocialLogin: (): any => mockSocialLogin
jest.mock('@/hooks/util', () => ({
    useQueryParam: (): any => mockQueryParams
describe('Login form', () => {
    afterEach(cleanup);
    it('matches snapshot', async () => {
        const { asFragment } = setup();
        await waitFor(() => asFragment());
        expect(asFragment()).toMatchSnapshot();
jest.config.js
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'node',
    moduleDirectories: ['node_modules', '<rootDir>/src'],
    modulePaths: ['<rootDir>/src'],
    transform: {
        '^.+\\.(t|j)sx?$': 'ts-jest'
    transformIgnorePatterns: ['<rootDir>/node_modules/.*'],
    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
    moduleNameMapper: {
        '^@/components(.*)$': '<rootDir>/src/components$1',
        '^@/pages(.*)$': '<rootDir>/src/pages$1',
        '^@/hooks(.*)$': '<rootDir>/src/hooks$1',
        '^@/utils(.*)$': '<rootDir>/src/utils$1',
        '^@/styles(.*)$': '<rootDir>/src/styles$1',
        '^@/context(.*)$': '<rootDir>/src/context$1',
        '^@/lib(.*)$': '<rootDir>/src/lib$1',
        '^@/slices(.*)$': '<rootDir>/src/slices$1',
        '^@/provider(.*)$': '<rootDir>/src/provider$1',
        '^@/theme(.*)$': '<rootDir>/src/theme$1'
        // '\\.(scss|sass|css)$': 'identity-obj-proxy'
I'm at a loss as to why this doesn't work. I've followed several guides but it just doesn't run.
If anybody could help me solve and understand why this doesn't work I would really, really appreciate it!
Thanks all!
                Have you wrapped other components in the Provider and had those test(s) succeed? Could you also show the LoginForm.tsx?
– lua_python_java
                Oct 12, 2022 at 15:39
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.