feat: replace use of enzyme with react-testing-library

jest.config.js

@@ -10,7 +10,7 @@ module.exports = {
   },
   clearMocks: true,
   collectCoverage: true,
-  setupFiles: [path.join(__dirname, '/resources/enzyme.config.js')],
+  setupFiles: [path.join(__dirname, '/resources/test.config.js')],
   testMatch: [
     '<rootDir>/packages/*/src/**/*-test.{js,ts}',
     '<rootDir>/packages/*/src/**/*.spec.{js,ts}',

packages/graphiql/package.json

@@ -39,7 +39,7 @@
     "cypress-open": "yarn e2e-server 'cypress open'",
     "e2e": "yarn e2e-server 'cypress run'",
     "e2e-server": "start-server-and-test 'cross-env PORT=8080 node test/e2e-server' 'http-get://localhost:8080/graphql?query={test { id }}'",
-    "test": "cross-env ENZYME=true node ../../resources/runTests",
+    "test": "cross-env node ../../resources/runTests",
     "storybook": "start-storybook"
   },
   "dependencies": {
@@ -61,11 +61,11 @@
   },
   "devDependencies": {
     "@storybook/react": "^5.2.8",
+    "@testing-library/jest-dom": "4.2.4",
+    "@testing-library/react": "9.4.0",
     "cross-env": "^6.0.3",
     "css-loader": "3.4.0",
     "cssnano": "^4.1.10",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
     "express": "5.0.0-alpha.5",
     "express-graphql": "0.9.0",
     "graphql": "14.5.8",

packages/graphiql/src/components/DocExplorer/__tests__/FieldDoc.spec.js

@@ -6,7 +6,8 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
 import FieldDoc from '../FieldDoc';
 
@@ -35,47 +36,58 @@ const exampleObject = new GraphQLObjectType({
 
 describe('FieldDoc', () => {
   it('should render a simple string field', () => {
-    const W = mount(
+    const { container } = render(
       <FieldDoc
         field={exampleObject.getFields().string}
         onClickType={jest.fn()}
       />,
     );
-    expect(W.find('MarkdownContent').text()).toEqual('No Description\n');
-    expect(W.find('TypeLink').text()).toEqual('String');
-    expect(W.find('Argument').length).toEqual(0);
+    expect(container.querySelector('.doc-type-description')).toHaveTextContent(
+      'No Description',
+    );
+    expect(container.querySelector('.type-name')).toHaveTextContent('String');
+    expect(container.querySelector('.arg')).not.toBeInTheDocument();
   });
 
   it('should re-render on field change', () => {
-    const W = mount(
+    const { container, rerender } = render(
       <FieldDoc
         field={exampleObject.getFields().string}
         onClickType={jest.fn()}
       />,
     );
-    expect(W.find('MarkdownContent').text()).toEqual('No Description\n');
-    expect(W.find('TypeLink').text()).toEqual('String');
-    expect(W.find('Argument').length).toEqual(0);
+    expect(container.querySelector('.doc-type-description')).toHaveTextContent(
+      'No Description',
+    );
+    expect(container.querySelector('.type-name')).toHaveTextContent('String');
+    expect(container.querySelector('.arg')).not.toBeInTheDocument();
+
+    rerender(
+      <FieldDoc
+        field={exampleObject.getFields().stringWithArgs}
+        onClickType={jest.fn()}
+      />,
+    );
+    expect(container.querySelector('.type-name')).toHaveTextContent('String');
+    expect(container.querySelector('.doc-type-description')).toHaveTextContent(
+      'Example String field with arguments',
+    );
   });
 
   it('should render a string field with arguments', () => {
-    const W = mount(
+    const { container } = render(
       <FieldDoc
         field={exampleObject.getFields().stringWithArgs}
         onClickType={jest.fn()}
       />,
     );
-    expect(
-      W.find('TypeLink')
-        .at(0)
-        .text(),
-    ).toEqual('String');
-    expect(
-      W.find('.doc-type-description')
-        .at(0)
-        .text(),
-    ).toEqual('Example String field with arguments\n');
-    expect(W.find('Argument').length).toEqual(1);
-    expect(W.find('Argument').text()).toEqual('stringArg: String');
+    expect(container.querySelector('.type-name')).toHaveTextContent('String');
+    expect(container.querySelector('.doc-type-description')).toHaveTextContent(
+      'Example String field with arguments',
+    );
+    expect(container.querySelectorAll('.arg')).toHaveLength(1);
+    expect(container.querySelector('.arg')).toHaveTextContent(
+      'stringArg: String',
+    );
   });
 });

packages/graphiql/src/components/DocExplorer/__tests__/TypeDoc.spec.js

@@ -6,7 +6,8 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
 import { GraphQLString } from 'graphql';
 
@@ -21,115 +22,107 @@ import {
 
 describe('TypeDoc', () => {
   it('renders a top-level query object type', () => {
-    const W = mount(
+    const { container } = render(
       <TypeDoc
         schema={ExampleSchema}
         type={ExampleQuery}
         onClickType={jest.fn()}
       />,
     );
-    const cats = W.find('.doc-category-item');
-    expect(cats.at(0).text()).toEqual('string: String');
-    expect(cats.at(1).text()).toEqual('union: exampleUnion');
-    expect(cats.at(2).text()).toEqual(
+    const cats = container.querySelectorAll('.doc-category-item');
+    expect(cats[0]).toHaveTextContent('string: String');
+    expect(cats[1]).toHaveTextContent('union: exampleUnion');
+    expect(cats[2]).toHaveTextContent(
       'fieldWithArgs(stringArg: String): String',
     );
   });
 
   it('handles onClickField and onClickType', () => {
     const onClickType = jest.fn();
     const onClickField = jest.fn();
-    const W = mount(
+    const { container } = render(
       <TypeDoc
         schema={ExampleSchema}
         type={ExampleQuery}
         onClickType={onClickType}
         onClickField={onClickField}
       />,
     );
-    W.find('TypeLink')
-      .at(0)
-      .simulate('click');
+    fireEvent.click(container.querySelector('.type-name'));
     expect(onClickType.mock.calls.length).toEqual(1);
     expect(onClickType.mock.calls[0][0]).toEqual(GraphQLString);
 
-    W.find('.field-name')
-      .at(0)
-      .simulate('click');
-
+    fireEvent.click(container.querySelector('.field-name'));
     expect(onClickField.mock.calls.length).toEqual(1);
     expect(onClickField.mock.calls[0][0].name).toEqual('string');
     expect(onClickField.mock.calls[0][0].type).toEqual(GraphQLString);
     expect(onClickField.mock.calls[0][1]).toEqual(ExampleQuery);
   });
 
   it('renders deprecated fields when you click to see them', () => {
-    const W = mount(
+    const { container } = render(
       <TypeDoc
         schema={ExampleSchema}
         type={ExampleQuery}
         onClickType={jest.fn()}
       />,
     );
-    let cats = W.find('.doc-category-item');
-    expect(cats.length).toEqual(3);
+    let cats = container.querySelectorAll('.doc-category-item');
+    expect(cats).toHaveLength(3);
 
-    W.find('.show-btn').simulate('click');
+    fireEvent.click(container.querySelector('.show-btn'));
 
-    cats = W.find('.doc-category-item');
-    expect(cats.length).toEqual(4);
-    expect(
-      W.find('.field-name')
-        .at(3)
-        .text(),
-    ).toEqual('deprecatedField');
-    expect(
-      W.find('.doc-deprecation')
-        .at(0)
-        .text(),
-    ).toEqual('example deprecation reason\n');
+    cats = container.querySelectorAll('.doc-category-item');
+    expect(cats).toHaveLength(4);
+    expect(container.querySelectorAll('.field-name')[3]).toHaveTextContent(
+      'deprecatedField',
+    );
+    expect(container.querySelector('.doc-deprecation')).toHaveTextContent(
+      'example deprecation reason',
+    );
   });
 
   it('renders a Union type', () => {
-    const W = mount(<TypeDoc schema={ExampleSchema} type={ExampleUnion} />);
-    expect(
-      W.find('.doc-category-title')
-        .at(0)
-        .text(),
-    ).toEqual('possible types');
+    const { container } = render(
+      <TypeDoc schema={ExampleSchema} type={ExampleUnion} />,
+    );
+    expect(container.querySelector('.doc-category-title')).toHaveTextContent(
+      'possible types',
+    );
   });
 
   it('renders an Enum type', () => {
-    const W = mount(<TypeDoc schema={ExampleSchema} type={ExampleEnum} />);
-    expect(
-      W.find('.doc-category-title')
-        .at(0)
-        .text(),
-    ).toEqual('values');
-    const enums = W.find('EnumValue');
-    expect(enums.at(0).props().value.value).toEqual('Value 1');
-    expect(enums.at(1).props().value.value).toEqual('Value 2');
+    const { container } = render(
+      <TypeDoc schema={ExampleSchema} type={ExampleEnum} />,
+    );
+    expect(container.querySelector('.doc-category-title')).toHaveTextContent(
+      'values',
+    );
+    const enums = container.querySelectorAll('.enum-value');
+    expect(enums[0]).toHaveTextContent('value1');
+    expect(enums[1]).toHaveTextContent('value2');
   });
 
   it('shows deprecated enum values on click', () => {
-    const W = mount(<TypeDoc schema={ExampleSchema} type={ExampleEnum} />);
-    expect(W.state().showDeprecated).toEqual(false);
-    const titles = W.find('.doc-category-title');
-    expect(titles.at(0).text()).toEqual('values');
-    expect(titles.at(1).text()).toEqual('deprecated values');
-    let enums = W.find('EnumValue');
-    expect(enums.length).toEqual(2);
+    const { getByText, container } = render(
+      <TypeDoc schema={ExampleSchema} type={ExampleEnum} />,
+    );
+    const showBtn = getByText('Show deprecated values...');
+    expect(showBtn).toBeInTheDocument();
+    const titles = container.querySelectorAll('.doc-category-title');
+    expect(titles[0]).toHaveTextContent('values');
+    expect(titles[1]).toHaveTextContent('deprecated values');
+    let enums = container.querySelectorAll('.enum-value');
+    expect(enums).toHaveLength(2);
 
     // click button to show deprecated enum values
-    W.find('.show-btn').simulate('click');
-    expect(W.state().showDeprecated).toEqual(true);
-    enums = W.find('EnumValue');
-    expect(enums.length).toEqual(3);
-    expect(enums.at(2).props().value.value).toEqual('Value 3');
-    expect(
-      W.find('.doc-deprecation')
-        .at(1)
-        .text(),
-    ).toEqual('Only two are needed\n');
+    fireEvent.click(showBtn);
+    expect(showBtn).not.toBeInTheDocument();
+    enums = container.querySelectorAll('.enum-value');
+    expect(enums).toHaveLength(3);
+    expect(enums[2]).toHaveTextContent('value3');
+    expect(container.querySelector('.doc-deprecation')).toHaveTextContent(
+      'Only two are needed',
+    );
   });
 });

packages/graphiql/src/components/DocExplorer/__tests__/TypeLink.spec.js

@@ -6,7 +6,8 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
 import TypeLink from '../TypeLink';
 
@@ -17,32 +18,32 @@ const listType = new GraphQLList(GraphQLString);
 
 describe('TypeLink', () => {
   it('should render a string', () => {
-    const instance = mount(<TypeLink type={GraphQLString} />);
-    expect(instance.text()).toEqual('String');
-    expect(instance.find('a').length).toEqual(1);
-    expect(instance.find('a').hasClass('type-name')).toEqual(true);
+    const { container } = render(<TypeLink type={GraphQLString} />);
+    expect(container).toHaveTextContent('String');
+    expect(container.querySelectorAll('a')).toHaveLength(1);
+    expect(container.querySelector('a')).toHaveClass('type-name');
   });
   it('should render a nonnull type', () => {
-    const instance = mount(<TypeLink type={nonNullType} />);
-    expect(instance.text()).toEqual('String!');
-    expect(instance.find('span').length).toEqual(1);
+    const { container } = render(<TypeLink type={nonNullType} />);
+    expect(container).toHaveTextContent('String!');
+    expect(container.querySelectorAll('span')).toHaveLength(1);
   });
   it('should render a list type', () => {
-    const instance = mount(<TypeLink type={listType} />);
-    expect(instance.text()).toEqual('[String]');
-    expect(instance.find('span').length).toEqual(1);
+    const { container } = render(<TypeLink type={listType} />);
+    expect(container).toHaveTextContent('[String]');
+    expect(container.querySelectorAll('span')).toHaveLength(1);
   });
   it('should handle a click event', () => {
     const op = jest.fn();
-    const instance = mount(<TypeLink type={listType} onClick={op} />);
-    instance.find('a').simulate('click');
+    const { container } = render(<TypeLink type={listType} onClick={op} />);
+    fireEvent.click(container.querySelector('a'));
     expect(op.mock.calls.length).toEqual(1);
     expect(op.mock.calls[0][0]).toEqual(GraphQLString);
   });
   it('should re-render on type change', () => {
-    const instance = mount(<TypeLink type={listType} />);
-    expect(instance.text()).toEqual('[String]');
-    instance.setProps({ type: GraphQLString });
-    expect(instance.text()).toEqual('String');
+    const { container, rerender } = render(<TypeLink type={listType} />);
+    expect(container).toHaveTextContent('[String]');
+    rerender(<TypeLink type={GraphQLString} />);
+    expect(container).toHaveTextContent('String');
   });
 });

packages/graphiql/src/components/__tests__/DocExplorer.spec.js

@@ -5,19 +5,20 @@
  *  LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 import { DocExplorer } from '../DocExplorer';
 
 describe('DocExplorer', () => {
   it('renders spinner when no schema prop is present', () => {
-    const W = mount(<DocExplorer />);
-    const spinner = W.find('.spinner-container');
-    expect(spinner.length).toEqual(1);
+    const { container } = render(<DocExplorer />);
+    const spinner = container.querySelectorAll('.spinner-container');
+    expect(spinner).toHaveLength(1);
   });
   it('renders with null schema', () => {
-    const W = mount(<DocExplorer schema={null} />);
-    const error = W.find('.error-container');
-    expect(error.length).toEqual(1);
-    expect(error.text()).toEqual('No Schema Available');
+    const { container } = render(<DocExplorer schema={null} />);
+    const error = container.querySelectorAll('.error-container');
+    expect(error).toHaveLength(1);
+    expect(error[0]).toHaveTextContent('No Schema Available');
   });
 });