Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 123 views

    Reactjs Testing

    Uploaded by

    Amit Sharma
    The document discusses testing React JS applications. It covers why writing tests is important like increasing stability and making code more understandable. It then demonstrates common testing approaches like ReactTestUtils and Enzyme. Enzyme is explained as a tool that makes it easier to test React components. The document provides examples of how to render components and write tests using Enzyme. It also discusses functional and integration testing with Selenium and Webdriver.io as tools to test interactions and functionality across the full application.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Reactjs Testing

    Uploaded by

    Amit Sharma
    123 views35 pages
    The document discusses testing React JS applications. It covers why writing tests is important like increasing stability and making code more understandable. It then demonstrates common testing approaches like ReactTestUtils and Enzyme. Enzyme is explained as a tool that makes it easier to test React components. The document provides examples of how to render components and write tests using Enzyme. It also discusses functional and integration testing with Selenium and Webdriver.io as tools to test interactions and functionality across the full application.

    Original Description:

    Reactjs Testing

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses testing React JS applications. It covers why writing tests is important like increasing stability and making code more understandable. It then demonstrates common testing approaches like ReactTestUtils and Enzyme. Enzyme is explained as a tool that makes it easier to test React components. The document provides examples of how to render components and write tests using Enzyme. It also discusses functional and integration testing with Selenium and Webdriver.io as tools to test interactions and functionality across the full application.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    123 views35 pages

    Reactjs Testing

    Uploaded by

    Amit Sharma
    The document discusses testing React JS applications. It covers why writing tests is important like increasing stability and making code more understandable. It then demonstrates common testing approaches like ReactTestUtils and Enzyme. Enzyme is explained as a tool that makes it easier to test React components. The document provides examples of how to render components and write tests using Enzyme. It also discusses functional and integration testing with Selenium and Webdriver.io as tools to test interactions and functionality across the full application.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 35
    At a glance
    Powered by AI
    The key takeaways are that software testing is important to increase stability, make extending the app less risky, improve architecture and code understandability, and make customers happier. Common ways to test ReactJS components include ReactTestUtils, Jest, and Enzyme.

    Common ways to test ReactJS components include ReactTestUtils, Jest (Facebook), and Enzyme (Airbnb).

    Enzyme is a JavaScript testing utility that makes it easier to assert, manipulate and traverse React components. It supports shallow rendering, full DOM rendering and static rendering. The ReactWrapper returned allows finding, containing and traversing components.

    React JS application

    testing
    Agenda
    What is software testing

    Why we don’t like to write tests

    Why it might be very helpful for us

    Example of successful tests implementation


    Do you like to cover your code with
    tests?
    But why?
    Usually we start writing tests when:

    It was a specific task

    There is no interesting features to do :)

    Project is almost done

    There was a huge fuck-up recently


    We should write tests because

    It will increase stability of the app

    Extending the app will be less risky

    Architecture will be better

    Code will be more understandable

    It will make your customers and users happier


    Demo application architecture

    ReactJS
    Rest API Proxy API
    part

    goo.gl/9zC48K
    Common ways of testing ReactJS Components

    ReactTestUtils

    Jest (Facebook)

    Enzyme (Airbnb)
    What is Enzyme?

    Enzyme is a JavaScript Testing utility


    for React that makes it easier to
    assert, manipulate, and traverse your
    React Components' output.

    goo.gl/9zC48K
    Enzyme

    Shallow render Full DOM render Static render


    Renders your When you need to Renders React
    component as a test interaction with Component to static
    single unit, without DOM API, or HTML
    impacting of childs component lifecycle
    Render process

    ReactWrapper:

    .find(selector)
    shallow(<YourComponent />)

    mount(<YourComponent />) .contains(selector)

    render(<YourComponent />) .children()

    .parents()

    etc...
    Props mocking
    The simplest test
    Another one
    Initial test
    Header test
    State processing
    MountWithTheme
    Enzyme known issues

    SFC(Stateless Functional Component) with mount

    Use Redux connect just in root component

    Works only with React


    Part 2
    Functional and Integration testing

    Integration testing - combines unit tests, and checks the


    this combination works as expected

    Functional (Acceptance) testing - tests which are written to


    see whether the application's functionality satisfies the
    specification
    A little bit of history
    Selenium 1.0
    Webdriver
    WebDriver is a remote control interface that enables
    introspection and control of user agents. It provides a
    platform- and language-neutral wire protocol as a way for out-
    of-process programs to remotely instruct the behaviour of
    web browsers.
    Selenium 1.0 + Webdriver = Selenium 2.0

    InternetExplorerDriver FirefoxDriver ChromeDriver SafariDriver


    Webdriver.io - Selenium 2.0 binding for
    node.js
    How it works?

    Remote or Local Browser-specific


    Selenium Webdriver
    Server
    Why webdriver.io?

    Synchronous implementation of asynchronous browser


    commands
    Simpler syntax

    Better documentation

    Flexibility and customization


    Config file
    Page object example
    webdriver.io simple test example
    Form testing example
    Page Object helper functions
    Conclusion

    Frontend tests are really important and useful

    The cost is not really big, profit is much bigger

    It’s easy to write them with modern approaches

    You might also like