143. How to use <FormattedMessage> as placeholder using React Intl?

     The <Formatted... /> components from react-intl return elements, not plain text, so they can't be used for placeholders, alt text, etc. In that case, you should use lower level API formatMessage(). You can inject the intl object into your component using injectIntl() higher-order component and then format the message using formatMessage() available on that object.

     import React from 'react'
     import { injectIntl, intlShape } from 'react-intl'
     
     const MyComponent = ({ intl }) => {
       const placeholder = intl.formatMessage({id: 'messageId'})
       return <input placeholder={placeholder} />
     }
     
     MyComponent.propTypes = {
       intl: intlShape.isRequired
     }
     
     export default injectIntl(MyComponent)
     

144. How to access current locale with React Intl?

     You can get the current locale in any component of your application using injectIntl():

     import { injectIntl, intlShape } from 'react-intl'
     
     const MyComponent = ({ intl }) => (
       <div>{`The current locale is ${intl.locale}`}</div>
     )
     
     MyComponent.propTypes = {
       intl: intlShape.isRequired
     }
     
     export default injectIntl(MyComponent)
     

145. How to format date using React Intl?

     The injectIntl() higher-order component will give you access to the formatDate() method via the props in your component. The method is used internally by instances of FormattedDate and it returns the string representation of the formatted date.

     import { injectIntl, intlShape } from 'react-intl'
     
     const stringDate = this.props.intl.formatDate(date, {
       year: 'numeric',
       month: 'numeric',
       day: 'numeric'
     })
     
     const MyComponent = ({intl}) => (
       <div>{`The formatted date is ${stringDate}`}</div>
     )
     
     MyComponent.propTypes = {
       intl: intlShape.isRequired
     }
     
     export default injectIntl(MyComponent)
     

React Testing

146. What is Shallow Renderer in React testing?

     Shallow rendering is useful for writing unit test cases in React. It lets you render a component one level deep and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered.

     For example, if you have the following component:

     function MyComponent() {
       return (
         <div>
           <span className={'heading'}>{'Title'}</span>
           <span className={'description'}>{'Description'}</span>
         </div>
       )
     }
     

     Then you can assert as follows:

     import ShallowRenderer from 'react-test-renderer/shallow'
     
     // in your test
     const renderer = new ShallowRenderer()
     renderer.render(<MyComponent />)
     
     const result = renderer.getRenderOutput()
     
     expect(result.type).toBe('div')
     expect(result.props.children).toEqual([
       <span className={'heading'}>{'Title'}</span>,
       <span className={'description'}>{'Description'}</span>
     ])
     

147. What is TestRenderer package in React?

     This package provides a renderer that can be used to render components to pure JavaScript objects, without depending on the DOM or a native mobile environment. This package makes it easy to grab a snapshot of the platform view hierarchy (similar to a DOM tree) rendered by a ReactDOM or React Native without using a browser or jsdom.

     import TestRenderer from 'react-test-renderer'
     
     const Link = ({page, children}) => <a href={page}>{children}</a>
     
     const testRenderer = TestRenderer.create(
       <Link page={'https://www.facebook.com/'}>{'Facebook'}</Link>
     )
     
     console.log(testRenderer.toJSON())
     // {
     //   type: 'a',
     //   props: { href: 'https://www.facebook.com/' },
     //   children: [ 'Facebook' ]
     // }
     

148. What is the purpose of ReactTestUtils package?

     ReactTestUtils are provided in the with-addons package and allow you to perform actions against a simulated DOM for the purpose of unit testing.

149. What is Jest?

     Jest is a JavaScript unit testing framework created by Facebook based on Jasmine and provides automated mock creation and a jsdom environment. It's often used for testing components.

150. What are the advantages of Jest over Jasmine?

     There are couple of advantages compared to Jasmine:

     • Automatically finds tests to execute in your source code.

     • Automatically mocks dependencies when running your tests.

     • Allows you to test asynchronous code synchronously.

     • Runs your tests with a fake DOM implementation (via jsdom) so that your tests can be run on the command line.

     • Runs tests in parallel processes so that they finish sooner.

151. Give a simple example of Jest test case

     Let's write a test for a function that adds two numbers in sum.js file:

     const sum = (a, b) => a + b
     
     export default sum
     

     Create a file named sum.test.js which contains actual test:

     import sum from './sum'
     
     test('adds 1 + 2 to equal 3', () => {
       expect(sum(1, 2)).toBe(3)
     })
     

     And then add the following section to your package.json:

     {
       "scripts": {
         "test": "jest"
       }
     }
     

     Finally, run yarn test or npm test and Jest will print a result:

     $ yarn test
     PASS ./sum.test.js
     ✓ adds 1 + 2 to equal 3 (2ms)
     

React Redux

152. What is flux?

     Flux is an application design paradigm used as a replacement for the more traditional MVC pattern. It is not a framework or a library but a new kind of architecture that complements React and the concept of Unidirectional Data Flow. Facebook uses this pattern internally when working with React.

     The workflow between dispatcher, stores and views components with distinct inputs and outputs as follows: