fix: error messages thrown by commands (#25)

* Add tests to verify error messages thrown by commands

* Remove jest/valid-expect from eslintConfig

Cypress uses chai for assertion causing the lint to fail

* Add contributor

* Update dom-testing-library to 3.12.4

* Lock cypress version to 3.1.1

* Update failing snapshot due to dom-testing-library upgrade

.all-contributorsrc

@@ -70,6 +70,17 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "misoguy",
+      "name": "Soo Jae Hwang",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/12230408?v=4",
+      "profile": "https://www.ossfinder.com",
+      "contributions": [
+        "bug",
+        "code",
+        "test"
+      ]
     }
   ],
   "repoType": "github"

README.md

@@ -16,7 +16,7 @@
 [![downloads][downloads-badge]][npmtrends]
 [![MIT License][license-badge]][license]
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors)
 [![PRs Welcome][prs-badge]][prs]
 [![Code of Conduct][coc-badge]][coc]
 
@@ -100,8 +100,8 @@ Thanks goes to these people ([emoji key][emojis]):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore -->
-| [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub>](https://kentcdodds.com)<br />[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=kentcdodds "Code") [📖](https://github.com/kentcdodds/cypress-testing-library/commits?author=kentcdodds "Documentation") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/kentcdodds/cypress-testing-library/commits?author=kentcdodds "Tests") | [<img src="https://avatars2.githubusercontent.com/u/498274?v=4" width="100px;"/><br /><sub><b>Ivan Babak</b></sub>](https://sompylasar.github.io)<br />[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=sompylasar "Code") [🤔](#ideas-sompylasar "Ideas, Planning, & Feedback") | [<img src="https://avatars1.githubusercontent.com/u/4002543?v=4" width="100px;"/><br /><sub><b>Łukasz Gandecki</b></sub>](http://team.thebrain.pro)<br />[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=lgandecki "Code") [⚠️](https://github.com/kentcdodds/cypress-testing-library/commits?author=lgandecki "Tests") | [<img src="https://avatars1.githubusercontent.com/u/25429764?v=4" width="100px;"/><br /><sub><b>Peter Kamps</b></sub>](https://github.com/npeterkamps)<br />[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=npeterkamps "Code") [📖](https://github.com/kentcdodds/cypress-testing-library/commits?author=npeterkamps "Documentation") [🤔](#ideas-npeterkamps "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/cypress-testing-library/commits?author=npeterkamps "Tests") | [<img src="https://avatars3.githubusercontent.com/u/4506749?v=4" width="100px;"/><br /><sub><b>Airat Aminev</b></sub>](https://github.com/airato)<br />[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=airato "Code") [⚠️](https://github.com/kentcdodds/cypress-testing-library/commits?author=airato "Tests") [🔧](#tool-airato "Tools") | [<img src="https://avatars0.githubusercontent.com/u/5121148?v=4" width="100px;"/><br /><sub><b>Adrian Smijulj</b></sub>](https://www.webiny.com)<br />[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=adrian1358 "Code") |
-| :---: | :---: | :---: | :---: | :---: | :---: |
+| [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub>](https://kentcdodds.com)<br />[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=kentcdodds "Code") [📖](https://github.com/kentcdodds/cypress-testing-library/commits?author=kentcdodds "Documentation") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/kentcdodds/cypress-testing-library/commits?author=kentcdodds "Tests") | [<img src="https://avatars2.githubusercontent.com/u/498274?v=4" width="100px;"/><br /><sub><b>Ivan Babak</b></sub>](https://sompylasar.github.io)<br />[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=sompylasar "Code") [🤔](#ideas-sompylasar "Ideas, Planning, & Feedback") | [<img src="https://avatars1.githubusercontent.com/u/4002543?v=4" width="100px;"/><br /><sub><b>Łukasz Gandecki</b></sub>](http://team.thebrain.pro)<br />[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=lgandecki "Code") [⚠️](https://github.com/kentcdodds/cypress-testing-library/commits?author=lgandecki "Tests") | [<img src="https://avatars1.githubusercontent.com/u/25429764?v=4" width="100px;"/><br /><sub><b>Peter Kamps</b></sub>](https://github.com/npeterkamps)<br />[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=npeterkamps "Code") [📖](https://github.com/kentcdodds/cypress-testing-library/commits?author=npeterkamps "Documentation") [🤔](#ideas-npeterkamps "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/cypress-testing-library/commits?author=npeterkamps "Tests") | [<img src="https://avatars3.githubusercontent.com/u/4506749?v=4" width="100px;"/><br /><sub><b>Airat Aminev</b></sub>](https://github.com/airato)<br />[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=airato "Code") [⚠️](https://github.com/kentcdodds/cypress-testing-library/commits?author=airato "Tests") [🔧](#tool-airato "Tools") | [<img src="https://avatars0.githubusercontent.com/u/5121148?v=4" width="100px;"/><br /><sub><b>Adrian Smijulj</b></sub>](https://www.webiny.com)<br />[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=adrian1358 "Code") | [<img src="https://avatars0.githubusercontent.com/u/12230408?v=4" width="100px;"/><br /><sub><b>Soo Jae Hwang</b></sub>](https://www.ossfinder.com)<br />[🐛](https://github.com/kentcdodds/cypress-testing-library/issues?q=author%3Amisoguy "Bug reports") [💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=misoguy "Code") [⚠️](https://github.com/kentcdodds/cypress-testing-library/commits?author=misoguy "Tests") |
+| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 

cypress/integration/commands.spec.js

@@ -3,8 +3,7 @@ describe('dom-testing-library commands', () => {
     cy.visit('/')
   })
   it('getByPlaceholderText', () => {
-    cy
-      .getByPlaceholderText('Placeholder Text')
+    cy.getByPlaceholderText('Placeholder Text')
       .click()
       .type('Hello Placeholder')
   })
@@ -14,8 +13,7 @@ describe('dom-testing-library commands', () => {
   })
 
   it('getByLabelText', () => {
-    cy
-      .getByLabelText('Label For Input Labelled By Id')
+    cy.getByLabelText('Label For Input Labelled By Id')
       .click()
       .type('Hello Input Labelled By Id')
   })
@@ -38,17 +36,35 @@ describe('dom-testing-library commands', () => {
   })
 
   it('getByText within', () => {
-    cy.get('#nested')
-      .within(() => {
-        cy.getByText('Button Text').click()
-      })
+    cy.get('#nested').within(() => {
+      cy.getByText('Button Text').click()
+    })
   })
 
   it('getByText in container', () => {
-    cy.get('#nested')
-      .then((subject) => {
-        cy.getByText('Button Text', { container: subject }).click()
-      })
+    cy.get('#nested').then(subject => {
+      cy.getByText('Button Text', {container: subject}).click()
+    })
+  })
+
+  it('getByTestId only throws the error message', () => {
+    const testId = 'Some random id'
+    const errorMessage = `Unable to find an element by: [data-testid="${testId}"]`
+    cy.on('fail', err => {
+      expect(err.message).to.eq(errorMessage)
+    })
+
+    cy.getByTestId(testId).click()
+  })
+
+  it('getByText only throws the error message', () => {
+    const text = 'Some random text'
+    const errorMessage = `Unable to find an element with the text: ${text}. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.`
+    cy.on('fail', err => {
+      expect(err.message).to.eq(errorMessage)
+    })
+
+    cy.getByText('Some random text').click()
   })
 })
 

package.json

@@ -44,10 +44,10 @@
   "author": "Kent C. Dodds <kent@doddsfamily.us> (http://kentcdodds.com/)",
   "license": "MIT",
   "dependencies": {
-    "dom-testing-library": "^3.8.0"
+    "dom-testing-library": "^3.12.4"
   },
   "devDependencies": {
-    "cypress": "^3.0.1",
+    "cypress": "3.1.1",
     "dtslint": "^0.3.0",
     "kcd-scripts": "^0.37.0",
     "npm-run-all": "^4.1.2",
@@ -62,7 +62,8 @@
     "extends": "./node_modules/kcd-scripts/eslint.js",
     "rules": {
       "import/prefer-default-export": "off",
-      "import/no-unassigned-import": "off"
+      "import/no-unassigned-import": "off",
+      "jest/valid-expect": "off"
     }
   },
   "eslintIgnore": [

src/__tests__/__snapshots__/commands.js.snap

@@ -2,8 +2,6 @@
 
 exports[`exports expected commands 1`] = `
 Array [
-  "queryByPlaceholderText",
-  "queryAllByPlaceholderText",
   "getByPlaceholderText",
   "getAllByPlaceholderText",
   "queryByText",
@@ -22,21 +20,23 @@ Array [
   "queryAllBySelectText",
   "getBySelectText",
   "getAllBySelectText",
-  "queryByTestId",
-  "queryAllByTestId",
   "getByTestId",
   "getAllByTestId",
   "queryByTitle",
   "queryAllByTitle",
   "getByTitle",
   "getAllByTitle",
-  "queryByValue",
-  "queryAllByValue",
   "getByValue",
   "getAllByValue",
-  "queryByRole",
-  "queryAllByRole",
   "getAllByRole",
   "getByRole",
+  "queryByPlaceholderText",
+  "queryAllByPlaceholderText",
+  "queryByTestId",
+  "queryAllByTestId",
+  "queryByValue",
+  "queryAllByValue",
+  "queryByRole",
+  "queryAllByRole",
 ]
 `;