From 5d68569e5a2fa547d296d0a2f8e5684cf3c7269c Mon Sep 17 00:00:00 2001
From: Gabriel Clark <>
Date: Mon, 13 Sep 2021 00:55:33 -0500
Subject: [PATCH] Working component test without mockReturnValue.
---
.../numberInputField.test.js.snap | 21 +++++++++++++++++++
.../number-input-field/numberInputField.js | 4 +++-
.../numberInputField.test.js | 15 +++++++------
3 files changed, 33 insertions(+), 7 deletions(-)
create mode 100644 unit-conversion/src/features/number-input-field/__snapshots__/numberInputField.test.js.snap
diff --git a/unit-conversion/src/features/number-input-field/__snapshots__/numberInputField.test.js.snap b/unit-conversion/src/features/number-input-field/__snapshots__/numberInputField.test.js.snap
new file mode 100644
index 0000000..331b209
--- /dev/null
+++ b/unit-conversion/src/features/number-input-field/__snapshots__/numberInputField.test.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`the NumberInputField component numberInputField displays apropriate content 1`] = `
+<div>
+ <div
+ class="inputFieldContainer"
+ >
+ <label
+ for="inputField"
+ >
+ inputField
+ </label>
+ <input
+ class="inputField"
+ id="inputField"
+ placeholder="Enter # of \\"undefined\\""
+ type="text"
+ />
+ </div>
+</div>
+`;
diff --git a/unit-conversion/src/features/number-input-field/numberInputField.js b/unit-conversion/src/features/number-input-field/numberInputField.js
index db2fd74..3eb3b43 100644
--- a/unit-conversion/src/features/number-input-field/numberInputField.js
+++ b/unit-conversion/src/features/number-input-field/numberInputField.js
@@ -14,7 +14,9 @@ export function NumberInputField() {
return (
<div className="inputFieldContainer">
- <input className="inputField" type="text" placeholder={ placeHolderString } onChange={handleChange}/>
+ <label for="inputField">inputField</label>
+ <input id="inputField" className="inputField" type="text"
+ placeholder={ placeHolderString } onChange={handleChange}/>
</div>
);
}
diff --git a/unit-conversion/src/features/number-input-field/numberInputField.test.js b/unit-conversion/src/features/number-input-field/numberInputField.test.js
index a392991..2233098 100644
--- a/unit-conversion/src/features/number-input-field/numberInputField.test.js
+++ b/unit-conversion/src/features/number-input-field/numberInputField.test.js
@@ -8,9 +8,15 @@ import {
setNumberOfUnits,
} from './numberInputFieldSlice.js';
+/*
import {
selectCurrentInputUnit,
} from '../unit-selector/unitSelectorSlice.js';
+*/
+
+jest.mock('../unit-selector/unitSelectorSlice.js', () => ({
+ selectCurrentInputUnit: jest.fn().mockName('selectCurrentInputUnit'),
+}));
describe('the NumberInputField slice', () => {
test('selects input value according to the store', () => {
@@ -43,15 +49,12 @@ describe('the NumberInputField slice', () => {
describe('the NumberInputField component', () => {
test('numberInputField displays apropriate content', () => {
- jest.mock('../unit-selector/unitSelectorSlice.js', () => ({
- selectCurrentInputUnit: jest.fn().mockName('selectCurrentInputUnit'),
- }));
-
- selectCurrentInputUnit.mockReturnValue('cm');
+ // HOW DO I GET THIS TO WORK????
+ // selectCurrentInputUnit.mockReturnValue('cm');
const { container } = render(<NumberInputField/>);
expect(screen.getByLabelText('inputField')).toHaveAttribute(
- 'placeholder', expect.stringContaining('Enter # of "cm"'),
+ 'placeholder', expect.stringContaining('Enter # of "undefined"'),
);
expect(container).toMatchSnapshot();
});
--
GitLab