refactor(tests): enzyme => react-testing-library (#37712)

* refactor: 💡 rewrite enzyme tests in react-testing-library

* fix: 🐛 remove enzyme imports from frame-runner.js

* chore: 🤖 install and add enzyme imports to frame-runner.js back
This commit is contained in:
Abdelrahman Ashraf
2019-11-08 13:20:25 +02:00
committed by mrugesh
parent 5ae8470bd5
commit 94532f98db
17 changed files with 1109 additions and 1242 deletions

View File

@@ -1,30 +1,26 @@
/* global expect */
import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import renderer from 'react-test-renderer';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { render } from '@testing-library/react';
import BlockSaveButton from './BlockSaveButton';
Enzyme.configure({ adapter: new Adapter() });
test('<BlockSaveButton /> snapshot', () => {
const component = renderer.create(<BlockSaveButton />);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
const { container } = render(<BlockSaveButton />);
expect(container).toMatchSnapshot();
});
test('Button text should default to "Save"', () => {
const enzymeWrapper = Enzyme.render(<BlockSaveButton />);
const { getByRole } = render(<BlockSaveButton />);
expect(enzymeWrapper.text()).toBe('Save');
expect(getByRole('button')).toHaveTextContent('Save');
});
test('Button text should match "children"', () => {
const enzymeWrapper = Enzyme.render(
<BlockSaveButton>My Text Here</BlockSaveButton>
);
const testText = 'My Text Here';
const { getByRole } = render(<BlockSaveButton>{testText}</BlockSaveButton>);
expect(enzymeWrapper.text()).toBe('My Text Here');
expect(getByRole('button')).toHaveTextContent(testText);
});

View File

@@ -1,16 +1,12 @@
/* global expect */
import React from 'react';
import renderer from 'react-test-renderer';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { render } from '@testing-library/react';
import BlockSaveWrapper from './BlockSaveWrapper';
Enzyme.configure({ adapter: new Adapter() });
test('<BlockSaveWrapper /> snapshot', () => {
const component = renderer.create(<BlockSaveWrapper />);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
const { container } = render(<BlockSaveWrapper />);
expect(container).toMatchSnapshot();
});

View File

@@ -1,11 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<BlockSaveButton /> snapshot 1`] = `
<button
className="btn btn-primary btn-block"
disabled={false}
type="submit"
>
Save
</button>
<div>
<button
class="btn btn-primary btn-block"
type="submit"
>
Save
</button>
</div>
`;

View File

@@ -1,11 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<BlockSaveWrapper /> snapshot 1`] = `
<div
style={
Object {
"padding": "0 15px",
}
}
/>
<div>
<div
style="padding: 0px 15px;"
/>
</div>
`;