javascript - Jest 测试无法解析 React 组件中的纯 HTML 标签

Question

测试运行在 Jest 中解析标准 HTML 标签时中断。我正在使用 Babel、Webpack、Jest 和 React 测试库。

我已经安装了以下软件包来启用 jest

"@babel/plugin-proposal-class-properties": "7.8.3",
"@babel/plugin-syntax-dynamic-import": "7.8.3",
"@babel/plugin-transform-modules-commonjs": "7.8.3",
"@babel/preset-react": "7.8.3",
"@babel/standalone": "7.8.6",
"@testing-library/dom": "6.12.2",
"@testing-library/jest-dom": "5.1.1",
"@testing-library/react": "9.4.0",
"babel-jest": "25.1.0",

在package.json中，我按如下方式配置了jest

"jest": {
  "verbose": true,
  "collectCoverage": true,
  "roots": [
      "<rootDir>/resources/js/"
  ],
  "testRegex": "tests/.*.test.js$",
  "moduleDirectories": [
      "resources/js/",
      "node_modules"
  ],
  "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "__mocks__/fileMock.js",
      "\\.(css|scss)$": "__mocks__/styleMock.js"
  }
}

因为我在 Laravel 中运行它；我使用 .bablerc 格式进行 babel 配置，其配置如下

{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env"
  ]
}

这是失败的测试

// import dependencies
import React from "react";
// import react-testing methods
import { render } from "@testing-library/react";
// add custom jest matchers from jest-dom
import "@testing-library/jest-dom/extend-expect";
// the component to test
import BlogEditor from "../../containers/BlogEditor/BlogEditor";

// https://jestjs.io/docs/en/mock-functions#mocking-modules
//jest.mock("axios");

test("Blog Editor renders", () => {
    const { getByTestId } = render(<BlogEditor />);
});

BlogEditor 组件有一个包含其他输入组件的 div 标签

render() {
    return (
        <div className="p-col-12">
            <div className="p-lg-12">
                <InputText
                    defaultValue={this.props.defaultTitle}
                    id="title"
                    placeholder="Blog Title"
                    onChange={e =>
                        this.handleInput("title", e.target.value)
                    }
                    onBlur={this.props.enableSave}
                />
            </div>
            // further details omitted...

测试无法解析所有内容的 div 标签

Test suite failed to run

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.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

SyntaxError: /Code/github/website/adminpanel/resources/js/containers/BlogEditor/BlogEditor.js: Unexpected token (46:12)

  44 |     render() {
  45 |         return (
> 46 |             <div className="p-col-12">
     |             ^
  47 |                 <div className="p-lg-12">
  48 |                     <InputText
  49 |                         defaultValue={this.props.defaultTitle}

  at Parser.raise (node_modules/@babel/parser/src/parser/location.js:41:63)
  at Parser.unexpected (node_modules/@babel/parser/src/parser/util.js:150:16)
  at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1123:20)
  at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:529:23)
  at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:509:21)
  at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:279:23)
  at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:234:23)
  at Parser.parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.js:185:21)
  at Parser.parseParenAndDistinguishExpression (node_modules/@babel/parser/src/parser/expression.js:1300:16)
  at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1030:21)

如何配置 babel/jest 才能解析 React 组件而不会出现这些错误。

Answer 1

import {React} from "react"; 应该改为 import React from "react";