1

I would like to test my React components built with TypeScript and Chakra UI using React Testing Library and Jest, and I am building a wrapper component pretty similar to what is described here. The difference is I am supplying a custom theme.js as a prop like so:

import React from "react"
import { render, RenderResult } from "@testing-library/react"
// @ts-ignore
import theme from "../../theme.js"
import { ThemeProvider } from "@chakra-ui/core"

export const renderWithTheme = (ui: React.ReactElement): RenderResult => {
    const Wrapper: React.ComponentType = children => <ThemeProvider theme={theme}>{children}</ThemeProvider>

    return render(ui, { wrapper: Wrapper })
}

Unfortunately this give me the following error:

Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    Details:

    /Users/neilchaudhuri/Vidya/applications/c1ds/components/theme.js:7
    export default {
    ^^^^^^

    SyntaxError: Unexpected token 'export'

      2 | import { render, RenderResult } from "@testing-library/react"
      3 | // @ts-ignore
    > 4 | import theme from "../../theme.js"
        | ^

I am not sure why this happens since the theme file is definitely JavaScript.

Any thoughts on how to deal with this?

Vidya
  • 29,932
  • 7
  • 42
  • 70

0 Answers0