use jest for snapshot testing localized

Author: Gregoor

fluent-react/babel.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  "presets": [
+    "@babel/preset-react",
+    ["@babel/preset-env", {
+      "targets": "node >= 8.9.0"
+    }]
+  ],
+  "plugins": [
+    ["babel-plugin-transform-rename-import", {
+      "original": "fluent",
+      "replacement": "fluent/compat"
+    }],
+    "@babel/plugin-proposal-async-generator-functions"
+  ],
+};

fluent-react/package.json

@@ -55,14 +55,20 @@
     "react": "^0.14.9 || ^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.0.0-beta.47",
+    "@babel/plugin-proposal-async-generator-functions": "^7.2.0",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-react": "7.0.0",
+    "babel-jest": "^24.8.0",
     "babel-plugin-transform-rename-import": "^2.2.0",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "jsdom": "^11.12.0",
+    "jest": "^24.8.0",
+    "prettier": "^1.18.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-test-renderer": "^16.8.6",
-    "sinon": "^4.2.2"
+    "react-test-renderer": "^16.8.6"
+  },
+  "jest": {
+    "transformIgnorePatterns": [
+      "node_modules/(?!(fluent-sequence)/)"
+    ]
   }
 }

fluent-react/test/.babelrc

@@ -3,7 +3,6 @@ import * as FluentReact from '../src/index';
 import LocalizationProvider from '../src/provider';
 import Localized from '../src/localized';
 import withLocalization from '../src/with_localization';
-import ReactLocalization, { isReactLocalization } from '../src/localization';
 
 suite('Exports', () => {
   test('LocalizationProvider', () => {
@@ -21,8 +20,4 @@ suite('Exports', () => {
   test('ReactLocalization', () => {
     assert.equal(FluentReact.ReactLocalization, ReactLocalization);
   });
-
-  test('isReactLocalization', () => {
-    assert.equal(FluentReact.isReactLocalization, isReactLocalization);
-  });
 });

fluent-react/test/exports_test.js

@@ -0,0 +1,36 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { FluentBundle } from "../../fluent/src";
+import { LocalizationProvider, Localized } from "../src/index";
+
+test("relocalizes", () => {
+  const Root = ({ bundle }) => (
+    <LocalizationProvider bundles={[bundle]}>
+      <Localized id="foo">
+        <div />
+      </Localized>
+    </LocalizationProvider>
+  );
+
+  const bundle1 = new FluentBundle();
+  bundle1.addMessages(`
+foo = FOO
+`);
+  const renderer = TestRenderer.create(<Root bundle={bundle1} />);
+  expect(renderer.toJSON()).toMatchInlineSnapshot(`
+    <div>
+      FOO
+    </div>
+  `);
+
+  const bundle2 = new FluentBundle();
+  bundle2.addMessages(`
+foo = BAR
+`);
+  renderer.update(<Root bundle={bundle2} />);
+  expect(renderer.toJSON()).toMatchInlineSnapshot(`
+    <div>
+      BAR
+    </div>
+  `);
+});

fluent-react/test/index.js

@@ -0,0 +1,74 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { FluentBundle } from "../../fluent/src";
+import { LocalizationProvider, Localized } from "../src/index";
+
+test("uses message from 1st bundle", () => {
+  const bundle1 = new FluentBundle();
+
+  bundle1.addMessages(`
+foo = FOO
+`);
+
+  const renderer = TestRenderer.create(
+    <LocalizationProvider bundles={[bundle1]}>
+      <Localized id="foo">
+        <div>Bar</div>
+      </Localized>
+    </LocalizationProvider>
+  );
+
+  expect(renderer.toJSON()).toMatchInlineSnapshot(`
+    <div>
+      FOO
+    </div>
+  `);
+});
+
+test("uses message from the 2nd bundle", function() {
+  const bundle1 = new FluentBundle();
+  const bundle2 = new FluentBundle();
+
+  bundle1.addMessages(`
+not-foo = NOT FOO
+`);
+  bundle2.addMessages(`
+foo = FOO
+`);
+
+  const renderer = TestRenderer.create(
+    <LocalizationProvider bundles={[bundle1, bundle2]}>
+      <Localized id="foo">
+        <div>Bar</div>
+      </Localized>
+    </LocalizationProvider>
+  );
+
+  expect(renderer.toJSON()).toMatchInlineSnapshot(`
+    <div>
+      FOO
+    </div>
+  `);
+});
+
+test("falls back back for missing message", function() {
+  const bundle1 = new FluentBundle();
+
+  bundle1.addMessages(`
+not-foo = NOT FOO
+`);
+
+  const renderer = TestRenderer.create(
+    <LocalizationProvider bundles={[bundle1]}>
+      <Localized id="foo">
+        <div>Bar</div>
+      </Localized>
+    </LocalizationProvider>
+  );
+
+  expect(renderer.toJSON()).toMatchInlineSnapshot(`
+    <div>
+      Bar
+    </div>
+  `);
+});