Question

我想使用 React 测试库和 Jest 测试我使用 TypeScript 和 Chakra UI 构建的 React 组件，并且我正在构建一个非常类似于 here 描述的包装器组件。不同之处在于我提供了一个自定义 theme.js 作为道具，如下所示：

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 })
}

不幸的是，这给了我以下错误：

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"
        | ^

我不确定为什么会发生这种情况，因为主题文件肯定是 JavaScript。

关于如何处理这个问题有什么想法吗？

Jest 错误测试使用 Chakra UI 构建的 React 组件

0 个答案: