reactjs - 使用 JEST 框架解析 JSX 的问题

Question

我想用 JEST 测试一个 js 文件，其中包括一些返回 jsx 的函数。

该函数的返回语句触发错误：

export const my_func = (entries) => {
    return entries.map(entry => <div value={entry}> {entry} </div>)
}

我收到以下错误：

 SyntaxError: /routes/my-app/helper-functions.js: Unexpected token (304:45)

 at Parser.raise (node_modules/@babel/parser/lib/index.js:6344:17)
      at Parser.unexpected (node_modules/@babel/parser/lib/index.js:7659:16)
      at Parser.parseExprAtom (node_modules/@babel/parser/lib/index.js:8828:20)
      at Parser.parseExprSubscripts (node_modules/@babel/parser/lib/index.js:8413:23)
      at Parser.parseMaybeUnary (node_modules/@babel/parser/lib/index.js:8393:21)
      at Parser.parseExprOps (node_modules/@babel/parser/lib/index.js:8280:23)
      at Parser.parseMaybeConditional (node_modules/@babel/parser/lib/index.js:8253:23)
      at Parser.parseMaybeAssign (node_modules/@babel/parser/lib/index.js:8200:21)
      at Parser.parseFunctionBody (node_modules/@babel/parser/lib/index.js:9390:24)
      at Parser.parseArrowExpression (node_modules/@babel/parser/lib/index.js:9349:10)

我已经在 - babel.config.js 中设置了 babel 配置

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
};

在我的 package.json 里面我有：

"scripts":{
    "test":"jest"
}

测试代码和导入语句如下：

import {sum} from '../routes/my-app/helper-functions';

test('adds 1 + 2 to equal 3', () => {
    expect(sum(1,2)).toBe(3);
});

yarn test我在终端中使用命令运行我的测试。

为了让这个文件正确导入，我在配置方面缺少什么？

标签： reactjsjestjs