Ava is not using babel presets from ava config

jsardev commented 6 years ago

Description

I've followed the latest babel recipe to configure ava in my project to use it with React. Unfortunately, specifying babel configuration via the ava property in package.json doesn't work. What's interesting is that using the same babel presets in .babelrc make ava work properly.

Test Source

Subject:

import React from "react";

class Component extends React.Component {
    render() {
        return <h1>Hello World</h1>;
    }
}

export default Component;

Test:

import test from "ava";

import Component from "./index";

test("something", t => {
    t.pass();
});

Error Message & Stack Trace

$ ava

  ✖ No tests found in index.test.js

  1 uncaught exception

  Uncaught exception in index.test.js

  /Users/sarneeh/Workshop/Development/Software/ava-test/node_modules/@babel/parse
r/lib/index.js:3939

  SyntaxError: /Users/sarneeh/Workshop/Development/Software/ava-test/index.js: Un
expected token (5:15)

  Parser.raise (node_modules/@babel/parser/lib/index.js:3939:15)
  Parser.unexpected (node_modules/@babel/parser/lib/index.js:5248:16)
  Parser.parseExprAtom (node_modules/@babel/parser/lib/index.js:6328:20)
  Parser.parseExprSubscripts (node_modules/@babel/parser/lib/index.js:5924:21)
  Parser.parseMaybeUnary (node_modules/@babel/parser/lib/index.js:5903:21)
  Parser.parseExprOps (node_modules/@babel/parser/lib/index.js:5812:21)
  Parser.parseMaybeConditional (node_modules/@babel/parser/lib/index.js:5784:21)  Parser.parseMaybeAssign (node_modules/@babel/parser/lib/index.js:5731:21)
  Parser.parseExpression (node_modules/@babel/parser/lib/index.js:5684:21)
  Parser.parseReturnStatement (node_modules/@babel/parser/lib/index.js:7508:28)

Config

Non-working:

package.json

{
    "ava": {
        "require": [
            "@babel/register"
        ],
        "babel": {
            "testOptions": {
                "presets": [
                    "@babel/preset-react"
                ]
            }
        }
    }
}

Working:

package.json

{
    "ava": {
        "require": [
            "@babel/register"
        ]
    }
}

.babelrc

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

Command-Line Arguments

Just ava.

Relevant Links

I've created a reproduction repository with a non-working and working example.

Using ava property in package.json: https://github.com/sarneeh/avajs-ava-issues-1968/tree/master Using .babelrc: https://github.com/sarneeh/avajs-ava-issues-1968/tree/working-example

Environment

Node: 10.9.0 Ava: 1.0.0-rc.1

novemberborn commented 5 years ago

@babel/register doesn't consult AVA's configuration. You haven't configured how it should compile the source files. Thus you get a syntax error when you try to load a source file (through @babel/register). It doesn't get compiled so the JSX syntax ends up breaking it.

Using .babelrc or babel.config.js is the correct approach.

(I'm closing this issue for housekeeping purposes, but let's keep the conversation going.)

jsardev commented 5 years ago

@novemberborn Uhm, well, I guess I misunderstood how it works. When I put a second thought on this topic it totally makes sense that ava's babel config property has nothing to do with what you put in require (because... why? 😄). Thanks for clarifying this and sorry for taking your time unnecessarily 😄

avajs / ava