Skip to content

Commit

Permalink
[DDW-829] Fix broken jest snapshots by using enzyme
Browse files Browse the repository at this point in the history 
While debugging a testing issue with the new scrollbar component i stumbled over the known problem of „react-test-renderer“ not being able to handle element refs correctly (since it doesn’t involve any real DOM rendering).

You can read more about that issue here: facebook/react#7740

This was the root cause and i couldnt make it work with react-test-renderer, so i refactored all the snapshot tests to use enzyme (which supports full DOM rendering). You can see the difference (react-test-renderer outputs a JSON with react component „markup“ whereas enzyme outputs only plain DOM nodes)
  • Loading branch information
@DominikGuzei
DominikGuzei committed Feb 5, 2020
1 parent e2e81c0 commit 8f7c519
Show file tree
Hide file tree
Showing 30 changed files with 3,519 additions and 2,445 deletions.
42 changes: 12 additions & 30 deletions __tests__/Autocomplete.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,52 +11,40 @@ const OPTIONS = [
];

test('Autocomplete renders correctly', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Autocomplete options={OPTIONS} />
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('Autocomplete renders with label', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Autocomplete
label="Enter your recovery phrase below"
options={OPTIONS}
/>
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('Autocomplete renders with a placeholder', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Autocomplete
placeholder="Enter recovery phrase"
options={OPTIONS}
/>
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('Autocomplete renders with an error', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Autocomplete
error="Your mnemonic phrase is incorrect"
options={OPTIONS}
/>
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('Autocomplete uses render prop - renderSelections', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Autocomplete
options={OPTIONS}
renderSelections={getSelectionProps => {
Expand All @@ -74,14 +62,11 @@ test('Autocomplete uses render prop - renderSelections', () => {
));
}}
/>
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('Autocomplete uses render prop - renderOptions', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Autocomplete
options={OPTIONS}
renderOptions={getOptionProps => {
Expand All @@ -94,8 +79,5 @@ test('Autocomplete uses render prop - renderOptions', () => {
));
}}
/>
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});
33 changes: 9 additions & 24 deletions __tests__/Bubble.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,29 @@ import { Bubble } from '../source/components/Bubble';
import { renderInSimpleTheme } from './helpers/theming';

test('Bubble renders correctly', () => {
const component = renderInSimpleTheme(<Bubble />);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
expect(renderInSimpleTheme(<Bubble />)).toMatchSnapshot();
});

test('Bubble renders isOpeningUpward={true}', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Bubble isOpeningUpward />
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('Bubble renders isTransparent={false}', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Bubble isTransparent={false} />
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('Bubble renders isHidden={true}', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Bubble isHidden />
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('Bubble renders isFloating={true}', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Bubble isFloating />
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});
19 changes: 5 additions & 14 deletions __tests__/Button.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,17 @@ import { Button } from '../source/components/Button';
import { renderInSimpleTheme } from './helpers/theming';

test('Button renders correctly', () => {
const component = renderInSimpleTheme(<Button />);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
expect(renderInSimpleTheme(<Button />)).toMatchSnapshot();
});

test('Button renders with a label', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Button label="send" />
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('Button is disabled', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Button disabled />
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});
28 changes: 8 additions & 20 deletions __tests__/Checkbox.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,25 @@ import { Checkbox } from '../source/components/Checkbox';
import { renderInSimpleTheme } from './helpers/theming';

test('Checkbox renders correctly', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Checkbox />
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('Checkbox renders with a label', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Checkbox label="check here" />
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('Checkbox is disabled', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Checkbox disabled />
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('Checkbox is checked', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Checkbox checked />
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});
35 changes: 10 additions & 25 deletions __tests__/FormField.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,57 +6,42 @@ import { renderInSimpleTheme } from './helpers/theming';
const renderFormField = () => <div className="render-prop" />;

test('FormField renders correctly', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<FormField render={renderFormField} />
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('FormField renders with label', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<FormField
label="Add a Label"
render={renderFormField}
/>
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('FormField renders with an error', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<FormField
error="Add an Error"
render={renderFormField}
/>
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('FormField is disabled', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<FormField
disabled
render={({ disabled }) => <span>{disabled.toString()}</span>}
/>
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('FormField renders an input element', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<FormField
render={() => <input className="render-prop" />}
/>
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});
28 changes: 8 additions & 20 deletions __tests__/Input.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,25 @@ import { Input } from '../source/components/Input';
import { renderInSimpleTheme } from './helpers/theming';

test('Input renders correctly', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Input />
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('Input renders with placeholder', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Input placeholder="0.0000" />
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('Input renders with a value', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Input value="there is value" />
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});

test('Input is readOnly', () => {
const component = renderInSimpleTheme(
expect(renderInSimpleTheme(
<Input readOnly />
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
)).toMatchSnapshot();
});
Loading

0 comments on commit 8f7c519

Please sign in to comment.