Explicitly test reporting errors in fluent-react (#520)

* Run prettier on test files to minimize inline snapshot code diff

Inline snapshots in Jest are powered by Prettier, however prettier
does not appear to be hooked up to the eslint.

https://jestjs.io/docs/en/snapshot-testing#inline-snapshots

In the following commits I add new inline snapshot tests, which
invalidates a lot of the existing formatting. This commit runs prettier
on the entire test directory to ensure that the following commits have
clean code diffs.

* Spy on console.warn in tests, and throw an error if called

The current tests aren't explicit on testing the behavior of what
errors get reported. This makes it difficult to understand the
current behavior. This commit adds a mechanism to fail a test if
the console.warn is called unexpectedly. Following commits will fix
up tests that fail from this new mechanism.

* Add explicit checks for what happens with console.warn in tests

These tests use the toMatchInlineSnapshot method to assert that an error
message was called. The snapshot allows for easy updating if the error
messages are re-phrased in the future.

Author: gregtatum

fluent-react/package.json

@@ -44,6 +44,12 @@
   "engines": {
     "node": ">=10.0.0"
   },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "./test/setup.js"
+    ],
+    "restoreMocks": true
+  },
   "dependencies": {
     "@fluent/sequence": "0.5.0",
     "cached-iterable": "^0.2.1",

fluent-react/test/localized_change.test.js

@@ -1,8 +1,11 @@
 import React from "react";
 import TestRenderer from "react-test-renderer";
 import { FluentBundle, FluentResource } from "@fluent/bundle";
-import { ReactLocalization, LocalizationProvider, Localized }
-  from "../esm/index";
+import {
+  ReactLocalization,
+  LocalizationProvider,
+  Localized
+} from "../esm/index";
 
 test("relocalizes", () => {
   const Root = ({ l10n }) => (
@@ -14,20 +17,26 @@ test("relocalizes", () => {
   );
 
   const bundle1 = new FluentBundle();
-  bundle1.addResource(new FluentResource(`
+  bundle1.addResource(
+    new FluentResource(`
 foo = FOO
-`));
-  const renderer = TestRenderer.create(<Root l10n={new ReactLocalization([bundle1])} />);
+`)
+  );
+  const renderer = TestRenderer.create(
+    <Root l10n={new ReactLocalization([bundle1])} />
+  );
   expect(renderer.toJSON()).toMatchInlineSnapshot(`
     <div>
       FOO
     </div>
   `);
 
   const bundle2 = new FluentBundle();
-  bundle2.addResource(new FluentResource(`
+  bundle2.addResource(
+    new FluentResource(`
 foo = BAR
-`));
+`)
+  );
   renderer.update(<Root l10n={new ReactLocalization([bundle2])} />);
   expect(renderer.toJSON()).toMatchInlineSnapshot(`
     <div>

fluent-react/test/localized_fallback.test.js

@@ -1,14 +1,19 @@
 import React from "react";
 import TestRenderer from "react-test-renderer";
 import { FluentBundle, FluentResource } from "@fluent/bundle";
-import { ReactLocalization, LocalizationProvider, Localized }
-  from "../esm/index";
+import {
+  ReactLocalization,
+  LocalizationProvider,
+  Localized
+} from "../esm/index";
 
 test("uses message from 1st bundle", () => {
   const bundle1 = new FluentBundle();
-  bundle1.addResource(new FluentResource(`
+  bundle1.addResource(
+    new FluentResource(`
 foo = FOO
-`));
+`)
+  );
 
   const renderer = TestRenderer.create(
     <LocalizationProvider l10n={new ReactLocalization([bundle1])}>
@@ -29,12 +34,16 @@ test("uses message from the 2nd bundle", function() {
   const bundle1 = new FluentBundle();
   const bundle2 = new FluentBundle();
 
-  bundle1.addResource(new FluentResource(`
+  bundle1.addResource(
+    new FluentResource(`
 not-foo = NOT FOO
-`));
-  bundle2.addResource(new FluentResource(`
+`)
+  );
+  bundle2.addResource(
+    new FluentResource(`
 foo = FOO
-`));
+`)
+  );
 
   const renderer = TestRenderer.create(
     <LocalizationProvider l10n={new ReactLocalization([bundle1, bundle2])}>
@@ -53,9 +62,11 @@ foo = FOO
 
 test("falls back back for missing message", function() {
   const bundle1 = new FluentBundle();
-  bundle1.addResource(new FluentResource(`
+  bundle1.addResource(
+    new FluentResource(`
 not-foo = NOT FOO
-`));
+`)
+  );
 
   const renderer = TestRenderer.create(
     <LocalizationProvider l10n={new ReactLocalization([bundle1])}>