diff --git a/src/components/LocaleSwitcher/__snapshots__/test.js.snap b/src/components/LocaleSwitcher/__snapshots__/test.js.snap index b5b32fb..87b5109 100644 --- a/src/components/LocaleSwitcher/__snapshots__/test.js.snap +++ b/src/components/LocaleSwitcher/__snapshots__/test.js.snap @@ -1,34 +1,36 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`LocaleSwitcher rendering 1`] = ` - - - Language - - - + + - + + - English - - - Other - - - - - + + English + + + Other + + + + + + `; diff --git a/src/components/LocaleSwitcher/index.js b/src/components/LocaleSwitcher/index.js index 07d49de..09679cb 100644 --- a/src/components/LocaleSwitcher/index.js +++ b/src/components/LocaleSwitcher/index.js @@ -38,7 +38,10 @@ export class LocaleSwitcher extends React.PureComponent { return Language - + { locales.map(locale => ( { locale.name } diff --git a/src/components/LocaleSwitcher/test.js b/src/components/LocaleSwitcher/test.js index 77ac016..23f409e 100644 --- a/src/components/LocaleSwitcher/test.js +++ b/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( ); - expect(component).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('changing language', () => { jest.spyOn(i18n, 'changeLanguage'); - const component = shallow( + const { getByTestId } = render( ); - const selectInput = component.find('select'); - selectInput.value = 'other'; - selectInput.simulate('change', { target: { value: 'other' } }); + const event = new Event('change', { bubbles: true }); + const select = getByTestId('language-select'); + select.value = 'other'; + + fireEvent(select, event); expect(i18n.changeLanguage).toHaveBeenCalledWith('other'); }); test('interface update from language change', () => { - const component = shallow( + const { getByTestId } = render( ); - 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( ); - jest.spyOn(component, 'setState'); + jest.spyOn(i18n, 'off'); - component.unmount(); - i18n.emit('languageChanged', 'other'); - expect(component.setState).not.toHaveBeenCalled(); + unmount(); + expect(i18n.off).toHaveBeenCalledWith( + 'languageChanged', + expect.any(Function)); }); });