Merge pull request #1000 from japgolly/topic/warnings

Support turning React warnings into errors

Author: japgolly

build.sbt

@@ -23,6 +23,7 @@ val ghpagesMacros         = ScalaJsReact.ghpagesMacros
 val root                  = ScalaJsReact.root
 val scalafixRules         = ScalaJsReact.scalafixRules
 val tests                 = ScalaJsReact.tests
+val testUtilMacros        = ScalaJsReact.testUtilMacros
 val testUtil              = ScalaJsReact.testUtil
 val util                  = ScalaJsReact.util
 val utilCatsEffect        = ScalaJsReact.utilCatsEffect

coreGeneric/src/main/scala-2/japgolly/scalajs/react/internal/ConfigMacros.scala

@@ -0,0 +1,22 @@
+package japgolly.scalajs.react.internal
+
+import japgolly.microlibs.compiletime._
+import scala.reflect.macros.blackbox.Context
+
+abstract class ConfigMacros(val c: Context) extends MacroUtils {
+  import c.universe._
+
+  protected def readConfig(key: String): Option[String] =
+    (Option(System.getProperty(key, null)) orElse Option(System.getenv(key)))
+      .map(_.trim.toLowerCase)
+      .filter(_.nonEmpty)
+
+  protected def modStr(expr: c.Expr[String])(f: String => c.Expr[String]): c.Expr[String] =
+    expr match {
+      case Expr(Literal(Constant(s: String))) => f(s)
+      case _                                  => expr
+    }
+
+  protected implicit def lit(s: String): c.Expr[String] =
+    c.Expr(Literal(Constant(s)))
+}

coreGeneric/src/main/scala-2/japgolly/scalajs/react/internal/ScalaJsReactConfigMacros.scala

@@ -1,33 +1,16 @@
 package japgolly.scalajs.react.internal
 
-import japgolly.microlibs.compiletime._
 import scala.reflect.macros.blackbox.Context
 
 object ScalaJsReactConfigMacros {
   final val KeyCompNameAll = "japgolly.scalajs.react.component.names.all"
   final val KeyCompNameAuto = "japgolly.scalajs.react.component.names.implicit"
 }
 
-class ScalaJsReactConfigMacros(val c: Context) extends MacroUtils {
+class ScalaJsReactConfigMacros(override val c: Context) extends ConfigMacros(c) {
   import ScalaJsReactConfigMacros._
   import c.universe._
 
-  private def readConfig(key: String): Option[String] =
-    (Option(System.getProperty(key, null)) orElse Option(System.getenv(key)))
-      .map(_.trim.toLowerCase)
-      .filter(_.nonEmpty)
-
-  private def modStr(expr: c.Expr[String])(f: String => c.Expr[String]): c.Expr[String] =
-    expr match {
-      case Expr(Literal(Constant(s: String))) => f(s)
-      case _ =>
-        // warn(s"Unable to transform component name:\n  $expr\n  ${showRaw(expr)}")
-        expr
-    }
-
-  private implicit def lit(s: String): c.Expr[String] =
-    c.Expr(Literal(Constant(s)))
-
   def automaticComponentName(displayName: c.Expr[String]): c.Expr[String] =
     modStr(displayName)(_automaticComponentName(_))
 

doc/CONFIG.md

@@ -6,6 +6,7 @@
   * [`.component.names.all`](#componentnamesall)
   * [`.component.names.implicit`](#componentnamesimplicit)
   * [`.config.class` *(Scala 3 only)*](#configclass-scala-3-only)
+  * [`.test.warnings.react`](#testwarningsreact)
 * Runtime Settings *(development-mode only)*
   * [Usage](#runtime-settings-usage)
   * [`Reusability.disableGloballyInDev()`](#reusabilitydisablegloballyindev)
@@ -161,6 +162,59 @@ object CustomConfig extends ScalaJsReactConfig.Defaults {
 ```
 
 
+# `.test.warnings.react`
+
+When using `ReactTestUtils`, this setting can be used to catch React warnings and turn them into exceptions.
+
+### Usage:
+
+```
+sbt -Djapgolly.scalajs.react.test.warnings.react=warn|fatal
+```
+
+| Setting | Outcome |
+| -- | -- |
+| `warn` (default) | Print warnings and move on |
+| `fatal`  | Throw warnings as exceptions |
+
+### Example:
+
+```
+sbt -Djapgolly.scalajs.react.test.warnings.react=fatal
+```
+
+```scala
+package com.example
+
+import japgolly.scalajs.react._
+import japgolly.scalajs.react.test._
+import japgolly.scalajs.react.vdom.html_<^._
+import utest._
+
+object ExampleTest extends TestSuite {
+
+  override def tests = Tests {
+    "example" - {
+      val comp = ScalaFnComponent[Int](i => <.p(<.td(s"i = $i")))
+      ReactTestUtils.withRenderedIntoBody(comp(123)).withParent { m =>
+        val html = m.outerHTML
+        assert(html == "<p><td>i = 123</td></p>")
+      }
+    }
+  }
+}
+```
+
+Running the above test will fail with this error message:
+
+```
+scala.scalajs.js.JavaScriptException: Warning: validateDOMNesting(...): <td> cannot appear as a child of <p>.
+  at td
+  at p
+  at $c_sjs_js_Any$.fromFunction1__F1__sjs_js_Function1
+```
+
+
 # Runtime Settings: Usage
 
 Runtime settings are designed for use in development-mode only (`fastOptJS`).

doc/TESTING.md

@@ -16,6 +16,7 @@ for how to write tests for real-world scalajs-react applications.
 - [`Testing props changes`](#testing-props-changes)
 - [`ReactTestVar`](#reacttestvar)
 - [`Test Scripts`](#test-scripts)
+- [Fatal React warnings](#fatal-react-warnings)
 
 Setup
 =====
@@ -223,3 +224,45 @@ In case you missed the notice at the top of the file, that functionality is prov
 
 See [this example](https://github.com/japgolly/test-state/tree/master/example-react)
 for how to write tests for real-world scalajs-react applications.
+
+
+Fatal React warnings
+====================
+
+The easiest way to make `ReactTestUtils` to turn React warnings into runtime exceptions,
+is via a [config option](./CONFIG.md#testwarningsreact).
+
+Alternatively, you can do any of the following...
+
+* Wrapping a test
+
+    ```scala
+    import japgolly.scalajs.react.test.ReactTestUtilsConfig
+    ReactTestUtilsConfig.AroundReact.fatalReactWarnings {
+      // test code here
+    }
+    ```
+
+* Installing for all `ReactTestUtils` usage
+
+    ```scala
+    import japgolly.scalajs.react.test.ReactTestUtilsConfig
+    ReactTestUtilsConfig.aroundReact.set(
+      ReactTestUtilsConfig.AroundReact.fatalReactWarnings)
+    ```
+
+* Installing outside of test code
+
+    ```scala
+    import japgolly.scalajs.react.util.ConsoleHijack
+    ConsoleHijack.fatalReactWarnings.install()
+    ```
+
+* Wrapping non-test code
+
+    ```scala
+    import japgolly.scalajs.react.util.ConsoleHijack
+    ConsoleHijack.fatalReactWarnings {
+      // code here
+    }
+    ```

doc/changelog/2.0.0.md

@@ -355,6 +355,10 @@ You can run the script in the Migration section at the bottom of the page to aut
 
 # Changes in RC4
 
+* Support turning React warnings into runtime exceptions. There are a few ways to do this:
+  * Via a [new config option](../CONFIG.md#testwarningsreact) for `ReactTestUtils`
+  * [Manually](../TESTING.md#fatal-react-warnings)
+
 * Document existing `debounce` methods to clarify you need to save them as a `val` and reuse them
 * Add:
   * `AsyncCallback.debounce(duration): AsyncCallback[Unit]`

downstream-tests/js/src/test/scala/downstream/RuntimeTests.scala

@@ -4,18 +4,22 @@ import cats.effect.IO
 import japgolly.microlibs.compiletime.CompileTimeInfo
 import japgolly.microlibs.testutil.TestUtil._
 import japgolly.scalajs.react._
+import japgolly.scalajs.react.vdom.html_<^._
 import japgolly.scalajs.react.test.ReactTestUtils._
 import japgolly.scalajs.react.util.JsUtil
+import org.scalajs.dom.console
 import scala.scalajs.js
 import scala.scalajs.LinkingInfo.developmentMode
 import scala.util.Try
 import utest._
+import japgolly.scalajs.react.test.ReactTestUtils
 
 object RuntimeTests extends TestSuite {
 
-  val compNameAuto = CompileTimeInfo.sysProp("japgolly.scalajs.react.component.names.implicit")
-  val compNameAll  = CompileTimeInfo.sysProp("japgolly.scalajs.react.component.names.all")
-  val configClass  = CompileTimeInfo.sysProp("japgolly.scalajs.react.config.class")
+  val compNameAuto      = CompileTimeInfo.sysProp("japgolly.scalajs.react.component.names.implicit")
+  val compNameAll       = CompileTimeInfo.sysProp("japgolly.scalajs.react.component.names.all")
+  val configClass       = CompileTimeInfo.sysProp("japgolly.scalajs.react.config.class")
+  val testWarningsReact = CompileTimeInfo.sysProp("japgolly.scalajs.react.test.warnings.react")
 
   val dsCfg1 = configClass.contains("downstream.DownstreamConfig1")
   val dsCfg2 = configClass.contains("downstream.DownstreamConfig2")
@@ -82,5 +86,25 @@ object RuntimeTests extends TestSuite {
         .map(_.get)
         .unsafeToFuture()
     }
+
+    "testWarnings" - {
+
+      "react" - {
+        val c = ScalaFnComponent[Int](i => <.p(<.td(s"i = $i")))
+        val t = Try(ReactTestUtils.withRenderedIntoBody(c(123))(_ => ()))
+        assertEq(t.isFailure, testWarningsReact.contains("react"))
+      }
+
+      "unlreated" - {
+        val c = ScalaFnComponent[Int](i => <.p(s"i = $i"))
+        val t = Try(ReactTestUtils.withRenderedIntoBody(c(123)) { _ =>
+          console.info(".")
+          console.log(".")
+          console.warn(".")
+          console.error(".")
+        })
+        assertEq(t.isFailure, false)
+      }
+    }
   }
 }

downstream-tests/run

@@ -6,7 +6,7 @@ skip2=skip2
 
 # Tests
 all_tests_values=(
-  "-Ddownstream_tests.enableJSCE"
+  "-Ddownstream_tests.enableJSCE -Djapgolly.scalajs.react.test.warnings.react=fatal"
   "-Djapgolly.scalajs.react.config.class=downstream.DownstreamConfig1 -Ddownstream_tests.reusability.dev=disable $skip2"
   "-Djapgolly.scalajs.react.component.names.implicit=blank -Djapgolly.scalajs.react.component.names.all=allow"
   "-Djapgolly.scalajs.react.component.names.implicit=short -Ddownstream_tests.reusability.dev=disable"

project/Build.scala

@@ -35,6 +35,7 @@ object ScalaJsReact {
       ghpagesMacros,
       scalafixRules,
       tests,
+      testUtilMacros,
       testUtil,
       util,
       utilCatsEffect,
@@ -222,12 +223,19 @@ object ScalaJsReact {
     )
 
   lazy val testUtil = project
-    .dependsOn(coreGeneric, extra, facadeTest)
+    .dependsOn(facadeTest, testUtilMacros, extra)
     .configure(commonSettings, publicationSettings, hasNoTests, effectGenericModule)
     .settings(
       moduleName := "test",
     )
 
+  lazy val testUtilMacros = project
+    .dependsOn(coreGeneric)
+    .configure(commonSettings, publicationSettings, definesMacros, hasNoTests, effectGenericModule)
+    .settings(
+      moduleName := "test-macros",
+    )
+
   lazy val util = project
     .dependsOn(utilFallbacks % Provided)
     .configure(commonSettings, publicationSettings, hasNoTests, disableScalaDoc3, prohibitDefaultEffects)