![\"Netflix](\"https:\/\/miro.medium.com\/v2\/resize:fill:88:88\/1*BJWRqfSMf9Da9vsXG9EBRQ.jpeg\")
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/a><\/p>\n <\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n by Moshe Kolodny<\/a><\/p>\n In this publish, we\u2019re excited to introduce SafeTest, a revolutionary library that provides a contemporary perspective on End-To-End (E2E) assessments for web-based User Interface (UI) purposes.<\/p>\n Traditionally, UI assessments have been carried out by both unit testing or integration testing (additionally known as End-To-End (E2E) testing). However, every of those strategies presents a novel trade-off: it’s a must to select between controlling the take a look at fixture and setup, or controlling the take a look at driver.<\/p>\n For occasion, when utilizing react-testing-library<\/a>, a unit testing answer, you keep full management over what to render and the way the underlying companies and imports ought to behave. However, you lose the flexibility to work together with an precise web page, which may result in a myriad of ache factors:<\/p>\n Conversely, utilizing integration testing instruments like Cypress or Playwright gives management over the web page, however sacrifices the flexibility to instrument the bootstrapping code for the app. These instruments function by remotely controlling a browser to go to a URL and work together with the web page. This method has its personal set of challenges:<\/p>\n Recognizing these challenges, options like E2E Component Testing have emerged, with choices from Cypress<\/a> and Playwright<\/a>. While these instruments try to rectify the shortcomings of conventional integration testing strategies, they produce other limitations on account of their structure. They begin a dev server with bootstrapping code to load the element and\/or setup code you need, which limits their skill to deal with advanced enterprise purposes that may have OAuth or a fancy construct pipeline. Moreover, updating TypeScript utilization might break your assessments till the Cypress\/Playwright group updates their runner.<\/p>\n SafeTest goals to handle these points with a novel method to UI testing. The important concept is to have a snippet of code in our utility bootstrapping stage that injects hooks to run our assessments<\/a> (see the How Safetest Works<\/a> sections for more information on what that is doing). Note that how this works has no measurable influence on the common utilization of your app since SafeTest leverages lazy loading to dynamically load the assessments solely when operating the assessments (within the README instance, the assessments aren\u2019t within the manufacturing bundle in any respect).<\/strong> Once that\u2019s in place, we are able to use Playwright to run common assessments, thereby attaining the best browser management we wish for our assessments.<\/p>\n This method additionally unlocks some thrilling options:<\/p>\n SafeTest is designed to really feel acquainted to anybody who has carried out UI assessments earlier than, because it leverages the very best elements of present options. Here\u2019s an instance of easy methods to take a look at a whole utility:<\/p>\n describe('my app', () => { await count on(web page.getByText('Welcome to the app')).toBeVisible(); We can simply as simply take a look at a selected element<\/p>\n describe('Header element', () => { await count on(web page.getByText('Admin')).not.toBeVisible(); it('has an admin mode', async () => { await count on(web page.getByText('Admin')).toBeVisible(); it('calls the logout handler when signing out', async () => { await web page.getByText('logout').click on(); SafeTest makes use of React Context to permit for worth overrides throughout assessments. For an instance of how this works, let\u2019s assume we’ve a fetchPeople perform utilized in a element:<\/p>\n export const People: React.FC = () => { if (loading) return <Loader \/>; We can modify the People element to make use of an Override:<\/p>\n +const FetchPerson = createOverride(fetchPerson);<\/p> export const People: React.FC = () => { if (loading) return <Loader \/>; Now, in our take a look at, we are able to override the response for this name:<\/p>\n describe('People', () => { await count on(web page.getByText('Loading')).toBeVisible(); it('has a loaded state', async () => { await count on(web page.getByText('User: Foo, title: 23')).toBeVisible(); it('has an error state', async () => { await count on(web page.getByText('Error getting customers: \"Whoops\"')).toBeVisible(); The render perform additionally accepts a perform that shall be handed the preliminary app element, permitting for the injection of any desired components anyplace within the app:<\/p>\n With overrides, we are able to write advanced take a look at circumstances akin to making certain a service technique which mixes API requests from Overrides aren\u2019t restricted to only API calls (since we are able to use additionally use +const Language = createOverride(navigator.language); describe('Admin', () => { await count on(web page.getByText('Permission error')).not.toBeVisible(); describe('Language', () => { await count on(web page.getByText('Current language is abc')).toBeVisible(); Overrides are a robust function of SafeTest and the examples right here solely scratch the floor. For extra info and examples, consult with the Overrides part<\/a> on the README<\/a>.<\/p>\n SafeTest comes out of the field with highly effective reporting capabilities, akin to computerized linking of video replays, Playwright hint viewer, and even deep hyperlink on to the mounted examined element<\/a>. The SafeTest repo README<\/a> hyperlinks to all of the instance apps<\/a> in addition to the reviews<\/a><\/p>\n Many giant companies want a type of authentication to make use of the app. Typically, navigating to localhost:3000 simply leads to a perpetually loading web page. You must go to a unique port, like localhost:8000, which has a proxy server to examine and\/or inject auth credentials into underlying service calls. This limitation is among the important causes that Cypress\/Playwright Component Tests aren\u2019t appropriate to be used at Netflix.<\/p>\n However, there\u2019s normally a service that may generate take a look at customers whose credentials we are able to use to log in and work together with the applying. This facilitates creating a lightweight wrapper round SafeTest to robotically generate and assume that take a look at consumer. For occasion, right here\u2019s principally how we do it at Netflix:<\/p>\n sort Setup = Parameters<typeof setup>[0] & { export const setupNetflix = (choices: Setup) => { beforeAll(async () => { After setting this up, we merely import the above bundle rather than the place we’d have used safetest\/setup.<\/p>\n While this publish centered on how SafeTest works with React, it\u2019s not restricted to only React. SafeTest additionally works with Vue, Svelte, Angular, and even can run on NextJS or Gatsby. It additionally runs utilizing both Jest or Vitest based mostly on which take a look at runner your scaffolding began you off with. The examples folder<\/a> demonstrates easy methods to use SafeTest with completely different tooling combos, and we encourage contributions so as to add extra circumstances.<\/p>\n At its core, SafeTest is an clever glue for a take a look at runner, a UI library, and a browser runner. Though the most typical utilization at Netflix employs Jest\/React\/Playwright, it\u2019s straightforward so as to add extra adapters for different choices.<\/p>\n SafeTest is a robust testing framework that\u2019s being adopted inside Netflix. It permits for straightforward authoring of assessments and gives complete reviews when and the way any failures occurred, full with hyperlinks to view a playback video or manually run the take a look at steps to see what broke. We\u2019re excited to see the way it will revolutionize UI testing and stay up for your suggestions and contributions.<\/p>\n<\/div>\n [ad_2]<\/p>\n","protected":false},"excerpt":{"rendered":" [ad_1] by Moshe Kolodny In this publish, we\u2019re excited to introduce SafeTest, a revolutionary library that provides a contemporary perspective on End-To-End (E2E) assessments for web-based User Interface (UI) purposes. Traditionally, UI assessments have been carried out by both unit testing or integration testing (additionally known as End-To-End (E2E) testing). However, every of those strategies […]<\/p>\n","protected":false},"author":1,"featured_media":121107,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37],"tags":[],"class_list":{"0":"post-121105","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-netflix"},"_links":{"self":[{"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/posts\/121105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/comments?post=121105"}],"version-history":[{"count":0,"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/posts\/121105\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/media\/121107"}],"wp:attachment":[{"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/media?parent=121105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/categories?post=121105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/tags?post=121105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Netflix](\"https:\/\/miro.medium.com\/v2\/resize:fill:48:48\/1*ty4NvNrGg4ReETxqU2N3Og.png\")
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n
\n
\n
import { describe, it, count on } from 'safetest\/jest';import { describe, it, count on, browserMock } from 'safetest\/jest';import { useAsync } from 'react-use'; import { fetchPerson } from '.\/api\/individual';const pending = new Promise(r => { \/* Do nothing *\/ });it('has a individuals loaded state', async () => {\/foo<\/code>, \/bar<\/code>, and \/baz<\/code>, has the right retry mechanism for simply the failed API requests and nonetheless maps the return worth accurately. So if \/bar<\/code> takes 3 makes an attempt to resolve the tactic will make a complete of 5 API calls.<\/p>\nweb page.route<\/a><\/code>), we are able to additionally override particular app degree values like function flags or altering some static worth:<\/p>\n+const UseFlags = createOverride(useFlags);![\"Image](\"https:\/\/miro.medium.com\/v2\/resize:fit:640\/format:webp\/1*OFmV3PX7Is8X48-V9ryeig.png)
import { setup } from 'safetest\/setup';