Skip to content

Instantly share code, notes, and snippets.

@alexander-elgin
Created June 22, 2018 09:30
Show Gist options
  • Save alexander-elgin/2110d5212652b47c848aedfd726e76c9 to your computer and use it in GitHub Desktop.
Save alexander-elgin/2110d5212652b47c848aedfd726e76c9 to your computer and use it in GitHub Desktop.
React-Intl with Enzyme & Jest
import React from 'react';
import messages from './messages.js';
import { Link } from 'react-router';
import { FormattedMessage } from 'react-intl';
const Home = () => (
<div>
<header>
<FormattedMessage {...messages.home_link}>
{(homeLink) => <FormattedMessage {...messages.header} values={{ link: <Link to="/">{ homeLink }</Link> }} />}
</FormattedMessage>
</header>
</div>
);
export default Home;
import React from 'react';
import { mountWithIntl } from 'enzyme-react-intl';
import Home from '__main_dir/components/views/Home/Home';
describe('The home page', () => {
let wrapper;
beforeEach(() => {
wrapper = mountWithIntl(<Home />);
});
it('renders a translated text', () => expect(wrapper.text()).toContain('The home page'));
});
import { defineMessages } from 'react-intl';
const messages = defineMessages({
header :{
id: 'home.header',
defaultMessage: 'The {link} page',
description: 'header text displayed at the top of the page'
},
home_link: {
id: 'home.home_link',
defaultMessage: 'home',
description: 'link text located in the home.header message'
}
});
export default messages;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment