@pie-lib/math-input-mathlive 1.1.5-beta.6 → 1.1.5-beta.7

package/src/__tests__/index.test.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import {
+  keys,
+  keysForGrade,
+  addBrackets,
+  removeBrackets,
+  registerEmbed,
+  applyStaticMath,
+  updateSpans,
+  mf,
+  mq,
+  MathInput,
+  HorizontalKeypad,
+  KeyPad,
+} from '../index';
+
+describe('math-input-mathlive public API', () => {
+  it('mirrors the @pie-lib/math-input export surface', () => {
+    expect(typeof keysForGrade).toBe('function');
+    expect(typeof addBrackets).toBe('function');
+    expect(typeof removeBrackets).toBe('function');
+    expect(typeof registerEmbed).toBe('function');
+    expect(typeof applyStaticMath).toBe('function');
+    expect(typeof updateSpans).toBe('function');
+    expect(keys).toBeDefined();
+    expect(keys.baseSet).toBeDefined();
+  });
+
+  it('exports the field wrappers under both mf and mq', () => {
+    expect(mf.Input).toBeDefined();
+    expect(mf.Static).toBeDefined();
+    // `mq` alias lets a consumer swap packages by changing only the import.
+    expect(mq).toBe(mf);
+  });
+
+  it('updateSpans is a safe no-op', () => {
+    expect(() => updateSpans()).not.toThrow();
+  });
+
+  it('CommonMqStyles keeps the shape consumers destructure', () => {
+    // math-toolbar does:
+    //   const { commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles }
+    //     = mq.CommonMqStyles;
+    const { commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles } = mf.CommonMqStyles;
+
+    [commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, supsubStyles].forEach((s) => {
+      expect(s).toBeDefined();
+      expect(typeof s).toBe('object');
+    });
+  });
+
+  it('bracket helpers round-trip', () => {
+    expect(addBrackets('x')).toEqual('\\(x\\)');
+    expect(removeBrackets('\\(x\\)')).toEqual('x');
+    expect(removeBrackets(addBrackets('\\frac{1}{2}'))).toEqual('\\frac{1}{2}');
+  });
+
+  it('keysForGrade returns a 5-row keyset', () => {
+    const set = keysForGrade('geometry');
+
+    expect(Array.isArray(set)).toBe(true);
+    expect(set.length).toBe(5);
+  });
+});
+
+describe('rendering', () => {
+  // MathLive is a browser-only custom element; loadMathLive() resolves async and
+  // is a no-op-ish under jsdom. These assert the components mount without
+  // throwing, which is what regressed most often in the MathQuill version.
+  it('KeyPad renders without a live MathLive instance', () => {
+    const { container } = render(<KeyPad onPress={() => {}} />);
+
+    expect(container.querySelectorAll('button').length).toBeGreaterThan(0);
+  });
+
+  it('KeyPad falls back to raw latex for labels before MathLive loads', () => {
+    const { container } = render(
+      <KeyPad onPress={() => {}} baseSet={[[{ name: 'pi', latex: '\\pi', category: 'constants' }]]} />,
+    );
+
+    expect(container.textContent).toContain('\\pi');
+  });
+
+  it('KeyPad fires onPress with the key definition', () => {
+    const onPress = jest.fn();
+    const key = { name: 'x', label: 'x', write: 'x', category: 'vars' };
+    const { container } = render(<KeyPad onPress={onPress} baseSet={[[key]]} />);
+
+    container.querySelector('button').click();
+
+    expect(onPress).toHaveBeenCalledWith(key);
+  });
+
+  it('MathInput mounts', () => {
+    expect(() => render(<MathInput latex="\\frac{1}{2}" onChange={() => {}} />)).not.toThrow();
+  });
+
+  it('HorizontalKeypad mounts and reports the legacy {value,type} model', () => {
+    const onClick = jest.fn();
+
+    expect(() => render(<HorizontalKeypad onClick={onClick} />)).not.toThrow();
+  });
+
+  it('Static renders display-mode latex without a mathfield', () => {
+    expect(() => render(<mf.Static latex="\\frac{1}{2}" />)).not.toThrow();
+  });
+});

package/src/__tests__/input-imperative.test.jsx

@@ -0,0 +1,144 @@
+import { KEYSTROKES, keyToAction } from '../latex-bridge';
+import Input from '../mf/input';
+
+/**
+ * The imperative surface that @pie-lib/math-toolbar drives
+ * (editor-and-pad.jsx: clear/command/keystroke/write/latex).
+ *
+ * These call the methods against a stub mathfield, because a real
+ * <math-field> needs a browser. What matters here is the *translation*:
+ * MathQuill-era arguments must become valid MathLive operations.
+ */
+const stubField = () => {
+  const calls = { insert: [], executeCommand: [], focus: 0 };
+
+  return {
+    calls,
+    value: '',
+    getValue: () => '',
+    insert(v) {
+      calls.insert.push(v);
+    },
+    executeCommand(v) {
+      calls.executeCommand.push(v);
+    },
+    focus() {
+      calls.focus++;
+    },
+    blur() {},
+  };
+};
+
+const withField = () => {
+  const input = new Input({});
+  const f = stubField();
+
+  input.mathField = f;
+
+  return { input, f };
+};
+
+describe('Input imperative API (drives math-toolbar)', () => {
+  describe('keystroke', () => {
+    it('maps MathQuill keystroke names to MathLive selectors', () => {
+      const { input, f } = withField();
+
+      input.keystroke('Left');
+      input.keystroke('Right');
+      input.keystroke('Backspace');
+
+      expect(f.calls.executeCommand).toEqual(['moveToPreviousChar', 'moveToNextChar', 'deleteBackward']);
+    });
+
+    it('passes an unknown value through as a selector', () => {
+      const { input, f } = withField();
+
+      input.keystroke('deleteForward');
+
+      expect(f.calls.executeCommand).toEqual(['deleteForward']);
+    });
+
+    it('does not throw when the engine rejects the selector', () => {
+      const { input } = withField();
+
+      input.mathField.executeCommand = () => {
+        throw new Error('unknown command');
+      };
+
+      expect(() => input.keystroke('Nonsense')).not.toThrow();
+    });
+
+    it('covers every keystroke the keypad emits', () => {
+      // navigation.js / edit.js only produce these three
+      ['Left', 'Right', 'Backspace'].forEach((k) => expect(KEYSTROKES[k]).toBeDefined());
+    });
+  });
+
+  describe('command', () => {
+    it('expands argument-taking commands into placeholders', () => {
+      const { input, f } = withField();
+
+      input.command('\\frac');
+
+      // a bare \frac would give no editable slots
+      expect(f.calls.insert).toEqual(['\\frac{#?}{#?}']);
+    });
+
+    it('handles array commands', () => {
+      const { input, f } = withField();
+
+      input.command(['\\log', '_']);
+
+      expect(f.calls.insert).toEqual(['\\log_{#?}']);
+    });
+
+    it('passes argument-less commands through', () => {
+      const { input, f } = withField();
+
+      input.command('\\pi');
+
+      expect(f.calls.insert).toEqual(['\\pi']);
+    });
+
+    it('agrees with keyToAction', () => {
+      expect(keyToAction({ command: '\\sqrt' }).value).toEqual('\\sqrt{#?}');
+    });
+  });
+
+  describe('safety before MathLive loads', () => {
+    it('every method is a no-op rather than a crash', () => {
+      const input = new Input({});
+
+      // mathField is undefined until loadMathLive() resolves
+      expect(input.latex()).toEqual('');
+      expect(input.clear()).toEqual('');
+      expect(input.command('\\frac')).toEqual('');
+      expect(input.keystroke('Left')).toEqual('');
+      expect(input.write('x')).toEqual('');
+      expect(() => input.focus()).not.toThrow();
+      expect(() => input.blur()).not.toThrow();
+      expect(() => input.setLatex('x')).not.toThrow();
+      expect(input.element).toBeUndefined();
+    });
+  });
+
+  describe('mqCompat facade', () => {
+    // math-toolbar used to call this.input.mathField.latex(); external
+    // consumers may still do the same.
+    it('exposes latex() as a getter', () => {
+      const { input } = withField();
+
+      input.mathField.getValue = () => '\\frac{1}{2}';
+
+      expect(input.mqCompat.latex()).toEqual('\\frac{1}{2}');
+    });
+
+    it('exposes latex(v) as a setter and el()', () => {
+      const { input, f } = withField();
+
+      input.mqCompat.latex('x+1');
+      expect(f.value).toEqual('x+1');
+      expect(input.mqCompat.el()).toBe(f);
+    });
+  });
+});

package/src/__tests__/keypad-label.test.jsx

@@ -0,0 +1,271 @@
+import { withVisibleEmptySlots as latexForDisplay } from '../latex-bridge';
+import { keyToAction, toMathLive } from '../latex-bridge';
+
+/**
+ * Keys use empty groups to show a command's shape (`\frac{}{}`, `x^{}`).
+ * MathLive renders `{}` as nothing, so labels need a visible stand-in - but the
+ * value that gets *inserted* must stay untouched.
+ */
+describe('keypad label display normalisation', () => {
+  it('gives empty groups a visible glyph', () => {
+    const out = latexForDisplay('\\frac{}{}');
+
+    expect(out).not.toEqual('\\frac{}{}');
+    // a \rule, not a glyph: font metrics for a substituted glyph do not match
+    // MathLive's, which left stretchy accents narrower than the box
+    expect(out).toContain('\\rule');
+    expect(out).toContain('pie-empty');
+  });
+
+  it.each([
+    ['absolute value', '\\abs{}', '|', '|'],
+    ['parenthesis', '\\left(\\right)', '(', ')'],
+    ['brackets', '\\left[\\right]', '[', ']'],
+  ])('gives an empty %s a tall, filled slot (the same muted tag as other slots)', (_name, latex, open, close) => {
+    const out = latexForDisplay(toMathLive(latex));
+
+    expect(out).toContain('pie-empty=1');
+    expect(out).toContain('\\rule[-0.25em]{0.55em}{1em}');
+    expect(out).not.toContain('\\boxed');
+    // the strut that keeps the fences tall while the box is centred on the axis
+    expect(out).toContain('\\rule{0em}{1em}');
+    expect(out.startsWith(`\\left${open}`)).toBe(true);
+    expect(out.endsWith(`\\right${close}`)).toBe(true);
+  });
+
+  it('leaves a filled pair of fences alone', () => {
+    expect(latexForDisplay(toMathLive('\\abs{x}'))).toEqual('\\left|x\\right|');
+    expect(latexForDisplay('\\left(x\\right)')).toEqual('\\left(x\\right)');
+  });
+
+  it('handles every empty-group key shape', () => {
+    [
+      '\\frac{}{}',
+      '\\overline{}',
+      'x^{}',
+      'x_{}',
+      '\\sqrt{}',
+      '\\sqrt[{}]{}',
+      '\\abs{}',
+      '\\log_{}',
+      '\\longdiv{}',
+    ].forEach((latex) => {
+      expect(latexForDisplay(latex)).not.toContain('{}');
+    });
+  });
+
+  it('treats a whitespace-only group as empty', () => {
+    // e.g. \frac{x}{ }
+    expect(latexForDisplay('\\frac{x}{ }')).toContain('pie-empty');
+  });
+
+  // MathQuill needed a nested \overline{} to draw the empty box. MathLive
+  // renders that as a real line, so those labels showed a spurious bar (a line
+  // under the arrows, and a straight line instead of the arc).
+  it('accent keys do not carry the nested-overline box hack', () => {
+    // eslint-disable-next-line global-require
+    const geometry = require('../keys/geometry');
+
+    Object.values(geometry).forEach((key) => {
+      if (key && typeof key.latex === 'string') {
+        expect(key.latex).not.toContain('\\overline{}}');
+      }
+    });
+  });
+
+  it('an accent over an empty slot still gets a visible box', () => {
+    ['\\overleftrightarrow{}', '\\overarc{}'].forEach((latex) => {
+      const out = latexForDisplay(latex);
+
+      expect(out).toContain('pie-empty');
+      expect(out).not.toContain('\\overline');
+    });
+  });
+
+  // A glyph's width comes from font metrics; U+25AB is not in the KaTeX fonts,
+  // so the browser substituted a wider one and stretchy accents came out
+  // narrower than the box. A rule has an explicit width.
+  it('the empty slot has an explicit width, not font-dependent metrics', () => {
+    const out = latexForDisplay('\\overarc{}');
+
+    expect(out).toContain('\\rule');
+    expect(out).toMatch(/rule\{[\d.]+em\}\{[\d.]+em\}/);
+    expect(out).not.toContain('unicode');
+  });
+
+  // Measured in the browser: the accent's immediate wrapper computes to 0px
+  // (its .ML__stretchy child is absolutely positioned), so the svg width has to
+  // resolve against .ML__base - whose width equals the content. Without pinning
+  // that, the arc collapsed to a spike and sat right of the box.
+  it('pins the accent containing block and drops the centering shift', () => {
+    // eslint-disable-next-line global-require
+    const { placeholderStyles } = require('../mf/common-styles');
+
+    expect(placeholderStyles['& .ML__base'].position).toEqual('relative');
+    expect(placeholderStyles['& .ML__stretchy']).toEqual({ position: 'absolute', left: 0, width: '100%' });
+    // must be !important: MathLive writes margin-left as an inline style, and a
+    // class cannot override that. Leaving it un-important also halved the arc's
+    // width, because .ML__center is the stretchy's containing block.
+    expect(placeholderStyles['& .ML__center:has(.ML__stretchy)'].marginLeft).toEqual('0 !important');
+  });
+
+  // MathLive sets the index of \sqrt[n]{x} in scriptscriptstyle - an inline
+  // `font-size: 50%` - which is too small to read on the nth-root key and in
+  // authored radicals. It is scaled up to 80%.
+  describe('radical index size', () => {
+    // Real MathLive 0.110 output for `\sqrt[1]{2}`, trimmed to the index. The
+    // selector walks this exact chain, so this fixture is what pins it down.
+    const INDEX_MARKUP = `
+      <span class="ML__base">
+        <span class="ML__sqrt-index">
+          <span class="ML__vlist-t"><span class="ML__vlist-r"><span class="ML__vlist" style="height:0.78em">
+            <span style="top:-3.45em">
+              <span class="ML__pstrut" style="height:3em"></span>
+              <span id="index-size" style="height:0.33em;display:inline-block;font-size: 50%">
+                <span class="ML__cmr">1</span>
+                <span id="nested-size" style="font-size: 50%">nested</span>
+              </span>
+            </span>
+          </span></span></span>
+        </span>
+        <span class="ML__sqrt-sign"><span class="ML__delim-size1">&#8730;</span></span>
+      </span>`;
+
+    const rule = () => {
+      // eslint-disable-next-line global-require
+      const { rootIndexStyles } = require('../mf/common-styles');
+      const selectors = Object.keys(rootIndexStyles);
+
+      expect(selectors).toHaveLength(1);
+
+      return { selector: selectors[0], value: rootIndexStyles[selectors[0]].fontSize };
+    };
+
+    it("scales the index glyph to 80%, up from MathLive's 50%", () => {
+      // !important: the 50% is an inline style, which a class cannot override.
+      expect(rule().value).toEqual('80% !important');
+    });
+
+    it('targets the span MathLive puts the inline font-size on', () => {
+      const holder = document.createElement('div');
+
+      holder.innerHTML = INDEX_MARKUP;
+
+      const matched = holder.querySelectorAll(rule().selector.replace(/^&\s*/, ''));
+
+      expect(Array.from(matched).map((el) => el.id)).toEqual(['index-size']);
+    });
+
+    it('leaves the radical index box itself unscaled', () => {
+      // Scaling `.ML__sqrt-index` would scale the em-based top/height offsets
+      // that tuck the index into the radical, lifting it clear of the crook.
+      const { selector } = rule();
+
+      expect(selector).not.toMatch(/\.ML__sqrt-index\s*\{?$/);
+      expect(selector.startsWith('& .ML__sqrt-index >')).toBe(true);
+    });
+
+    it('applies wherever math renders - keypad labels, static math, mathfield', () => {
+      // eslint-disable-next-line global-require
+      const cs = require('../mf/common-styles');
+      const { selector } = rule();
+
+      ['commonKeyboardStyles', 'commonMathLiveStyles', 'supsubStyles'].forEach((name) => {
+        expect(cs[name][selector]).toBeDefined();
+      });
+
+      // The live mathfield renders in a shadow root, which host styles cannot
+      // reach, so the same rule ships as plain CSS for `applyShadowStyles`.
+      expect(cs.ROOT_INDEX_CSS).toContain('.ML__sqrt-index >');
+      // Derived, so the size lives in one place: the two copies cannot drift.
+      expect(cs.ROOT_INDEX_CSS).toContain(`font-size:${rule().value}`);
+    });
+  });
+
+  it('applies those rules wherever static math renders', () => {
+    // eslint-disable-next-line global-require
+    const cs = require('../mf/common-styles');
+
+    ['commonKeyboardStyles', 'commonMathLiveStyles'].forEach((name) => {
+      expect(cs[name]['& .ML__stretchy']).toBeDefined();
+      expect(cs[name]['& .ML__base']).toBeDefined();
+    });
+  });
+
+  // A bare `& svg` rule re-parents every svg in the subtree; MathLive's own rule
+  // is descendant-scoped to .ML__latex .ML__stretchy svg.
+  it('does not use a blanket svg rule', () => {
+    // eslint-disable-next-line global-require
+    const cs = require('../mf/common-styles');
+
+    Object.values(cs).forEach((style) => {
+      if (style && typeof style === 'object') {
+        expect(Object.keys(style)).not.toContain('& svg');
+      }
+    });
+  });
+
+  // The Percent key showed as a blank button on the Advanced Algebra keypad
+  // (row 1, position 6). MathQuill defined `LatexCmds['%']` as a symbol that
+  // serialised to `\\%`, so its bare `%` label parsed fine; MathLive parses real
+  // LaTeX, where `%` opens a comment - the label rendered nothing, and pressing
+  // the key inserted a comment that swallowed the rest of the expression.
+  it('the percent key is escaped, not a latex comment', () => {
+    // eslint-disable-next-line global-require
+    const { percentage } = require('../keys/misc');
+
+    expect(percentage.latex).toEqual('\\%');
+    expect(keyToAction(percentage).value).toEqual('\\%');
+  });
+
+  // Any bare `%` in a key would fail the same way, silently.
+  it('no keypad key carries an unescaped %', () => {
+    // eslint-disable-next-line global-require
+    const { baseSet } = require('../keys');
+    // eslint-disable-next-line global-require
+    const { gradeSets } = require('../keys/grades');
+
+    const every = [...baseSet, ...gradeSets.map((g) => g.set)];
+
+    const walk = (node) => {
+      if (Array.isArray(node)) {
+        node.forEach(walk);
+        return;
+      }
+
+      if (!node) {
+        return;
+      }
+
+      ['latex', 'write', 'command'].forEach((field) => {
+        const value = node[field];
+
+        if (typeof value === 'string') {
+          // a `%` is only safe when preceded by an odd run of backslashes
+          expect(value.replace(/\\./g, '')).not.toContain('%');
+        }
+      });
+    };
+
+    walk(every);
+  });
+
+  it('leaves latex without empty groups alone', () => {
+    ['\\pi', '\\sin', 'x^2', '\\overline{AB}'].forEach((latex) => {
+      expect(latexForDisplay(latex)).toEqual(latex);
+    });
+  });
+
+  it('handles nullish input', () => {
+    expect(latexForDisplay(undefined)).toEqual('');
+    expect(latexForDisplay('')).toEqual('');
+  });
+
+  it('does NOT affect what gets inserted into the field', () => {
+    // the action must use the key's own latex, never the display form
+    const key = { name: 'frac', latex: '\\frac{}{}' };
+
+    expect(keyToAction(key).value).toEqual('\\frac{}{}');
+    expect(keyToAction(key).value).not.toContain('pie-empty');
+  });
+});

package/src/__tests__/keypad-render.test.jsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import KeyPad, { LatexLabel } from '../keypad';
+
+/**
+ * Keypad behaviour that is new in this package: labels are static markup from
+ * convertLatexToMarkup (the MathQuill version created a live StaticMath per
+ * button), with a raw-latex fallback when the engine is unavailable.
+ */
+describe('LatexLabel', () => {
+  it('falls back to raw latex when MathLive is unavailable', () => {
+    // jsdom cannot load MathLive, so latexToMarkup returns '' - the button must
+    // still show something rather than render blank.
+    const { container } = render(<LatexLabel latex={'\\pi'} />);
+
+    expect(container.textContent).toContain('\\pi');
+  });
+
+  it('re-renders when the latex prop changes', () => {
+    const { container, rerender } = render(<LatexLabel latex={'\\pi'} />);
+
+    rerender(<LatexLabel latex={'\\theta'} />);
+
+    expect(container.textContent).toContain('\\theta');
+  });
+
+  it('does not warn more than once about a missing engine', async () => {
+    LatexLabel.warned = false;
+
+    const a = new LatexLabel({ latex: '\\pi' });
+    const b = new LatexLabel({ latex: '\\theta' });
+
+    a.state = { markup: '' };
+    b.state = { markup: '' };
+    a.setState = () => {};
+    b.setState = () => {};
+
+    await a.componentDidMount();
+    await b.componentDidMount();
+
+    expect(LatexLabel.warned).toBe(true);
+  });
+});
+
+describe('KeyPad', () => {
+  const key = (over = {}) => ({ name: 'x', label: 'x', write: 'x', category: 'vars', ...over });
+
+  it('renders a button per key', () => {
+    const { container } = render(<KeyPad onPress={() => {}} baseSet={[[key(), key({ name: 'y', label: 'y' })]]} />);
+
+    expect(container.querySelectorAll('button').length).toBe(2);
+  });
+
+  it('calls onPress with the whole key definition', () => {
+    const onPress = jest.fn();
+    const k = key();
+    const { container } = render(<KeyPad onPress={onPress} baseSet={[[k]]} />);
+
+    container.querySelector('button').click();
+
+    expect(onPress).toHaveBeenCalledWith(k);
+  });
+
+  it('renders a latex key through LatexLabel', () => {
+    const { container } = render(<KeyPad onPress={() => {}} baseSet={[[{ name: 'pi', latex: '\\pi' }]]} />);
+
+    expect(container.textContent).toContain('\\pi');
+  });
+
+  it('disables the decimal separators when noDecimal is set', () => {
+    const dot = key({ name: '.', label: '.', write: '.' });
+    const comma = key({ name: ',', label: ',', write: ',' });
+    const { container } = render(<KeyPad onPress={() => {}} noDecimal baseSet={[[dot, comma]]} />);
+
+    const disabled = Array.from(container.querySelectorAll('button')).filter((b) => b.disabled);
+
+    expect(disabled.length).toBe(2);
+  });
+
+  it('leaves the separators enabled otherwise', () => {
+    const dot = key({ name: '.', label: '.', write: '.' });
+    const { container } = render(<KeyPad onPress={() => {}} baseSet={[[dot]]} />);
+
+    expect(container.querySelector('button').disabled).toBe(false);
+  });
+
+  it('renders a placeholder for empty grid slots', () => {
+    expect(() => render(<KeyPad onPress={() => {}} baseSet={[[null]]} />)).not.toThrow();
+  });
+
+  it('notifies setKeypadInteraction on pointer interaction', () => {
+    const setKeypadInteraction = jest.fn();
+    const { container } = render(
+      <KeyPad onPress={() => {}} setKeypadInteraction={setKeypadInteraction} baseSet={[[key()]]} />,
+    );
+
+    container.firstChild.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+
+    expect(setKeypadInteraction).toHaveBeenCalledWith(true);
+  });
+
+  it('uses the mode as a class so mode-specific styling applies', () => {
+    const { container } = render(<KeyPad onPress={() => {}} mode="language" baseSet={[[key()]]} />);
+
+    expect(container.firstChild.className).toContain('language');
+  });
+
+  it('drops the base set for the modes that supply their own keys', () => {
+    const { container } = render(
+      <KeyPad onPress={() => {}} mode="language" baseSet={[[key(), key()]]} additionalKeys={[[key()]]} />,
+    );
+
+    // base set ignored, only the additional key renders
+    expect(container.querySelectorAll('button').length).toBe(1);
+  });
+
+  it('unmounts without throwing', () => {
+    const { unmount } = render(<KeyPad onPress={() => {}} controlledKeypadMode baseSet={[[key()]]} />);
+
+    expect(() => unmount()).not.toThrow();
+  });
+});