Working with RedwoodJS and Jest. "SYNTAX ERROR : Jest encountered an unexpected token"

Question

I was trying to write some test for my Redwoodjs project. I am using the FullCalendar.io package and jest complains when it encounters the import statements for this package. Here's what it says:

Jest encountered an unexpected token

    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.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

I have tried various solutions but the jest problem still remains. Adding a bable.config.js didnt work out.

package.json

{
  "private": true,
  "workspaces": {
    "packages": [
      "api",
      "web",
      "packages/*"
    ]
  },
  "devDependencies": {
    "@redwoodjs/auth-dbauth-setup": "4.1.4",
    "@redwoodjs/core": "4.1.4"
  },
  "eslintConfig": {
    "extends": "@redwoodjs/eslint-config",
    "root": true
  },
  "engines": {
    "node": ">=14.19 <=16.x",
    "yarn": ">=1.15"
  },
  "prisma": {
    "seed": "yarn rw exec seed"
  },
  "packageManager": "[email protected]",
  "dependencies": {
    "@fullcalendar/core": "^6.1.4",
    "@fullcalendar/daygrid": "^6.1.4",
    "@fullcalendar/interaction": "^6.1.4",
    "@fullcalendar/react": "^6.1.4",
    "@fullcalendar/timegrid": "^6.1.4",
    "react-calendar": "^4.0.0"
  }
}

jest.config.js

module.exports = {
  rootDir: '.',
  projects: ['<rootDir>/{*,!(node_modules)/**/}/jest.config.js'],
}

web/jest.config.js

const config = {
  rootDir: '../',
  preset: '@redwoodjs/testing/config/jest/web',
}

module.exports = config

the file that it complains about: web\src\components\AppointmentList\AppointmentList.js

import { Box } from '@chakra-ui/react'
import interactionPlugin from '@fullcalendar/interaction'
import FullCalendar from '@fullcalendar/react'
import timeGridPlugin from '@fullcalendar/timegrid'

const AppointmentList = () => {
  const arr = [
    //add appointment array outside the return statement for better integration
    //The events prop is an array of objects that represent the events to display on the calendar
    {
      id: 1,
      title: 'event 1',
      start: '2023-02-26T10:00:00',
      end: '2023-02-26T12:00:00',
    },
    {
      id: 1,
      title: 'event 2',
      start: '2023-02-26T14:00:00',
      end: '2023-02-26T14:30:00',
    },
  ]
  return (
    <Box>
      <FullCalendar
        plugins={[timeGridPlugin, interactionPlugin]}
        initialView="timeGridDay"
        initialDate="2023-02-26" //SHOULD BE A PROP FROM TASK VIEW GROUP
        slotMinTime="06:00:00"
        slotMaxTime="21:00:00"
        slotDuration="00:30:00"
        nowIndicator
        headerToolbar={{
          start: 'title',
          center: '',
          end: '',
        }}
        const
        events={arr}
      />
    </Box>
  )
}

export default AppointmentList

web\src\components\AppointmentList\AppointmentList.test.js

import { render } from '@redwoodjs/testing/web'

import { render } from '@redwoodjs/testing/web'

import AppointmentList from './AppointmentList'

//   Improve this test with help from the Redwood Testing Doc:
//    https://redwoodjs.com/docs/testing#testing-components

describe('AppointmentList', () => {
  it('renders successfully', () => {
    expect(() => {
      render(<AppointmentList />)
    }).not.toThrow()
  })
  it('renders a FullCalendar component with the correct props', () => {
    const { getByTestId } = render(<AppointmentList />)
    const calendar = getByTestId('appointment-calendar')

    expect(calendar).toBeInTheDocument()
    expect(calendar).toBeInstanceOf(FullCalendar)

    expect(calendar.props.plugins).toEqual(
      expect.arrayContaining(['@fullcalendar/timegrid', '@fullcalendar/interaction'])
    )
    expect(calendar.props.initialView).toBe('timeGridDay')
    expect(calendar.props.slotMinTime).toBe('06:00:00')
    expect(calendar.props.slotMaxTime).toBe('21:00:00')
    expect(calendar.props.slotDuration).toBe('00:30:00')
    expect(calendar.props.nowIndicator).toBe(true)
    expect(calendar.props.headerToolbar).toEqual({
      start: 'title',
      center: '',
      end: '',
    })
  })

  it('renders the correct events on the calendar', () => {
    const { getByText } = render(<AppointmentList />)
    const event1 = getByText('event 1')
    const event2 = getByText('event 2')

    expect(event1).toBeInTheDocument()
    expect(event2).toBeInTheDocument()
  })
})

Trying the solutions from stackoverflow didn't help.

I want to make the tests working for the AppointmentList component. Any help would be appreciated....

Answer 1

I'm also using @fullcalendar with RedwoodJS and was running into this exact same problem. I found this issue on the fullcalendar GitHub repo, and although I can't say that I fully understand the explanation at this time, the solution in this comment did fix it for me.

Put the following code into the web workspace's jest.config.js file.

const config = {
  rootDir: '../',
  preset: '@redwoodjs/testing/config/jest/web',
  testEnvironment: 'jsdom',
  testEnvironmentOptions: {
    customExportConditions: [], // don't load "browser" field
  },
}

NOTE: I can't guarantee that this doesn't have other side effects, but everything else seems to be working normally for my project so far. :) I hope this helps!