Updating LocaleSwitcher to use react-testing-library

src/components/LocaleSwitcher/__snapshots__/test.js.snap

@@ -1,34 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LocaleSwitcher rendering 1`] = `
-<label>
+<DocumentFragment>
-  <Trans>
+  <label>
+    <span
+      data-component="Trans"
+      data-props="{}"
+    >
       Language
-  </Trans>
+    </span>
     <div
-    className="switcher"
+      class="switcher"
     >
       <select
-      onChange={[Function]}
+        data-testid="language-select"
-      value="en"
       >
         <option
-        key="en"
           value="en"
         >
           English
         </option>
         <option
-        key="other"
           value="other"
         >
           Other
         </option>
       </select>
-    <ChevronsDown
+      <span
-      color="currentColor"
+        data-component="ChevronsDown"
-      size="24"
+        data-props="{}"
       />
     </div>
-</label>
+  </label>
+</DocumentFragment>
 `;

src/components/LocaleSwitcher/index.js

@@ -38,7 +38,10 @@ export class LocaleSwitcher extends React.PureComponent {
     return <label>
       <Trans>Language</Trans>
       <div className={ style.switcher }>
-        <select value={ current } onChange={ this.handleSelectChange }>
+        <select data-testid="language-select"
+          value={ current }
+          onChange={ this.handleSelectChange }
+        >
           { locales.map(locale => (
             <option value={ locale.code } key={ locale.code }>
               { locale.name }

src/components/LocaleSwitcher/test.js

@@ -1,5 +1,9 @@
+jest.mock('react-feather/dist/icons/chevrons-down', () =>
+  require('__mocks__/component-mock')(
+    'react-feather/dist/icons/chevrons-down'));
+
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, fireEvent } from 'react-testing-library';
 
 import i18n from 'i18n';
 import { LocaleSwitcher } from 'components/LocaleSwitcher';
@@ -9,44 +13,47 @@ jest.mock('./locale-to-available', () => jest.fn(() => 'en'));
 
 describe('LocaleSwitcher', () => {
   test('rendering', () => {
-    const component = shallow(
+    const { asFragment } = render(
       <LocaleSwitcher />
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('changing language', () => {
     jest.spyOn(i18n, 'changeLanguage');
 
-    const component = shallow(
+    const { getByTestId } = render(
       <LocaleSwitcher />
     );
-    const selectInput = component.find('select');
+    const event = new Event('change', { bubbles: true });
-    selectInput.value = 'other';
+    const select = getByTestId('language-select');
-    selectInput.simulate('change', { target: { value: 'other' } });
+    select.value = 'other';
+
+    fireEvent(select, event);
 
     expect(i18n.changeLanguage).toHaveBeenCalledWith('other');
   });
 
   test('interface update from language change', () => {
-    const component = shallow(
+    const { getByTestId } = render(
       <LocaleSwitcher />
     );
 
-    expect(component.find('select').prop('value')).toEqual('en');
+    expect(getByTestId('language-select').value).toEqual('en');
     i18n.emit('languageChanged', 'other');
-    expect(component.find('select').prop('value')).toEqual('other');
+    expect(getByTestId('language-select').value).toEqual('other');
   });
 
   test('disconnecting event handler on unmount', () => {
-    const component = shallow(
+    const { unmount } = render(
       <LocaleSwitcher />
     );
 
-    jest.spyOn(component, 'setState');
+    jest.spyOn(i18n, 'off');
 
-    component.unmount();
+    unmount();
-    i18n.emit('languageChanged', 'other');
+    expect(i18n.off).toHaveBeenCalledWith(
-    expect(component.setState).not.toHaveBeenCalled();
+      'languageChanged',
+      expect.any(Function));
   });
 });