Skip to content
Permalink
Browse files

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
  • Loading branch information...
theashraf authored and raisedadead committed Nov 8, 2019
1 parent 5ae8470 commit 94532f98db18971d0707becc01466947124622b4

Large diffs are not rendered by default.

@@ -95,7 +95,7 @@
},
"devDependencies": {
"@testing-library/jest-dom": "^4.1.2",
"@testing-library/react": "^9.3.0",
"@testing-library/react": "^9.3.2",
"autoprefixer": "^9.6.5",
"babel-plugin-transform-imports": "^1.5.1",
"chokidar": "^2.1.5",
@@ -40,11 +40,13 @@ async function initTestFrame(e = {}) {
if (e.loadEnzyme) {
let Adapter16;
/* eslint-disable no-inline-comments */

[{ default: Enzyme }, { default: Adapter16 }] = await Promise.all([
import(/* webpackChunkName: "enzyme" */ 'enzyme'),
import(/* webpackChunkName: "enzyme-adapter" */ 'enzyme-adapter-react-16')
]);
/* eslint-enable no-inline-comments */

Enzyme.configure({ adapter: new Adapter16() });
}

@@ -1,18 +1,20 @@
/* global expect jest */

import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import { createStore } from '../../redux/createStore';

import { Map } from './';
import mockChallengeNodes from '../../__mocks__/challenge-nodes';
import mockIntroNodes from '../../__mocks__/intro-nodes';

import { dasherize } from '../../../../utils/slugs';

Enzyme.configure({ adapter: new Adapter() });
const renderer = new ShallowRenderer();
function renderWithRedux(ui) {
return render(<Provider store={createStore()}>{ui}</Provider>);
}

const baseProps = {
introNodes: mockIntroNodes,
@@ -27,7 +29,7 @@ const baseProps = {
window.scrollTo = jest.fn();

test('<Map /> snapshot', () => {
const componentToRender = (
const { container } = renderWithRedux(
<Map
introNodes={mockIntroNodes}
nodes={mockChallengeNodes}
@@ -36,8 +38,8 @@ test('<Map /> snapshot', () => {
toggleSuperBlock={() => {}}
/>
);
const component = renderer.render(componentToRender);
expect(component).toMatchSnapshot('Map');

expect(container).toMatchSnapshot('Map');
});

describe('<Map/>', () => {
@@ -61,8 +63,9 @@ describe('<Map/>', () => {
toggleBlock: blockSpy,
toggleSuperBlock: superSpy
};
const mapToRender = <Map {...props} />;
shallow(mapToRender);

renderWithRedux(<Map {...props} />);

expect(blockSpy).toHaveBeenCalledTimes(1);
expect(superSpy).toHaveBeenCalledTimes(1);
expect(initializeSpy).toHaveBeenCalledTimes(1);
@@ -80,8 +83,7 @@ describe('<Map/>', () => {
currentChallengeId
};

const mapToRender = <Map {...props} />;
shallow(mapToRender);
renderWithRedux(<Map {...props} />);

expect(blockSpy).toHaveBeenCalledTimes(1);
// the block here should always be the first block of the superblock
@@ -102,8 +104,7 @@ describe('<Map/>', () => {
currentChallengeId
};

const mapToRender = <Map {...props} />;
shallow(mapToRender);
renderWithRedux(<Map {...props} />);

expect(blockSpy).toHaveBeenCalledTimes(1);
expect(blockSpy).toHaveBeenCalledWith(idNode.block);
@@ -120,8 +121,9 @@ describe('<Map/>', () => {
toggleBlock: blockSpy,
toggleSuperBlock: superSpy
};
const mapToRender = <Map {...props} />;
shallow(mapToRender);

renderWithRedux(<Map {...props} />);

expect(blockSpy).toHaveBeenCalledTimes(1);
expect(blockSpy).toHaveBeenCalledWith(defaultNode.block);

@@ -135,8 +137,9 @@ describe('<Map/>', () => {
...baseProps,
resetExpansion: expansionSpy
};
const mapToRender = <Map {...props} />;
shallow(mapToRender);

renderWithRedux(<Map {...props} />);

expect(expansionSpy).toHaveBeenCalledTimes(1);
});
});

0 comments on commit 94532f9

Please sign in to comment.
You can’t perform that action at this time.