test equivalent to react-testing lib example

Author: bahmutov

cypress/integration/testing-lib-example/README.md

@@ -0,0 +1 @@
+Testing example used by https://testing-library.com/docs/react-testing-library/example-intro

cypress/integration/testing-lib-example/fetch.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import axios from 'axios'
+
+export default function Fetch({ url }) {
+ const [greeting, setGreeting] = useState('')
+ const [buttonClicked, setButtonClicked] = useState(false)
+
+ const fetchGreeting = () => {
+ axios.get(url).then(response => {
+ const data = response.data
+ const { greeting } = data
+ setGreeting(greeting)
+ setButtonClicked(true)
+ })
+ }
+
+ const buttonText = buttonClicked ? 'Ok' : 'Load Greeting'
+
+ return (
+ <div>
+ <button onClick={fetchGreeting} disabled={buttonClicked} role="button">
+ {buttonText}
+ </button>
+ {greeting ? <h1 role="heading">{greeting}</h1> : null}
+ </div>
+ )
+}

cypress/integration/testing-lib-example/spec.js

@@ -0,0 +1,17 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from "cypress-react-unit-tests";
+import Fetch from './fetch'
+
+it('loads and displays greeting', () => {
+ cy.server()
+ cy.route('/greeting', {greeting: 'Hello there'}).as('greet')
+
+ const url = '/greeting'
+ mount(<Fetch url={url} />)
+
+ cy.contains('Load Greeting').click()
+ cy.get('[role=heading]').should('have.text', 'Hello there')
+ cy.get('[role=button]').and('be.disabled')
+ cy.get('@greet').its('url').should('match', /\/greeting$/)
+})