getting jest to work with babel / laravel-mix

问题

I'm using jest and testing-library/react for tests of my ReactJS components in a Laravel app.

My tests break because the component to to test isn't recognised by jest even after importing it into the test. I have the following settings in jest.config.js

module.exports = {
  testRegex: 'resources/js/tests/.*.test.js$',
  roots: ["<rootDir>/resources/js/"],
  moduleDirectories: ["resources/js/components", "resources/js/containers", "resources/js/views", "node_modules"]
}

And in the package.json file

"test": "cross-env NODE_ENV=test jest",

Here's a simple test that fails due to error

import React from "react";
import { render, fireEvent, waitForElement } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import axiosMock from "axios";
// the component to test
import BlogEditor from "../../components/BlogEditor/BlogEditor";
jest.mock("axios");

test("Blog Editor recieves props and renders", () => {
    const { getByTestId } = render(
        <BlogEditor
            tags={[{ id: 1, name: "A tag"}]}
            suggestions={[{id: 2, name: "A Suggestion"}]}
        />
    );
});

The error I get is rather cryptic

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: /Users/anadi/Code/adminpanel/resources/js/tests/BlogEditor/BlogEditor.test.js: Unexpected token (16:8)

  14 | test("Blog Editor recived props and renders element", () => {
  15 |     const { getByTestId } = render(
> 16 |         <BlogEditor
     |         ^
  17 |             tags={[{ id: 1, name: "A tag"}]}
  18 |             suggestions={[{id: 2, name: "A Suggestion"}]}
  19 |         />

  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.parseExprListItem (node_modules/@babel/parser/src/parser/expression.js:2077:18)
  at Parser.parseCallExpressionArguments (node_modules/@babel/parser/src/parser/expression.js:817:14)

回答1:

The problem was with my babel and jest configurations, moved jest configuration to package.json (I have no clue why this actually helped) but it did

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

and updated the babel configuration too

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import"
  ]
}

来源：https://stackoverflow.com/questions/60376159/getting-jest-to-work-with-babel-laravel-mix

标签

reactjs

laravel-mix

babel-jest