Improving api #13
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| const expect = require('expect') //eslint-disable-line import/no-extraneous-dependencies | ||
| const extensions = require('./dist/jest-extensions') | ||
|
|
||
| const {toBeInTheDOM, toHaveTextContent, toSatisfyDOM} = extensions.default | ||
| expect.extend({toBeInTheDOM, toHaveTextContent, toSatisfyDOM}) | ||
|
|
||
| module.exports = expect |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| import React from 'react' | ||
| import {render} from '../' | ||
| import '../../extend-expect' | ||
|
|
||
| test('query can return null', () => { | ||
| const { | ||
|
|
@@ -66,4 +67,18 @@ test('totally empty label', () => { | |
| expect(() => getByLabelText('')).toThrowErrorMatchingSnapshot() | ||
| }) | ||
|
|
||
| test('using jest helpers to assert element states', () => { | ||
| const {queryByTestId, getByTestId} = render( | ||
| <span data-testid="count-value">2</span>, | ||
| ) | ||
|
|
||
| //other ways to assert your test cases, but you don't need all of them. | ||
|
||
| expect(queryByTestId('count-value')).toBeInTheDOM() | ||
| expect(queryByTestId('count-value')).toHaveTextContent('2') | ||
| expect(getByTestId('count-value')).toSatisfyDOM(el => el.textContent === '2') | ||
|
||
| expect(queryByTestId('count-value')).not.toHaveTextContent( | ||
| 'you are not there', | ||
| ) | ||
| }) | ||
|
|
||
| /* eslint jsx-a11y/label-has-for:0 */ | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import {matcherHint, printReceived, printExpected} from 'jest-matcher-utils' //eslint-disable-line import/no-extraneous-dependencies | ||
|
|
||
| function getDisplayName(subject) { | ||
| if (subject && subject.constructor) { | ||
| return subject.constructor.name | ||
| } else { | ||
| return typeof subject | ||
| } | ||
| } | ||
|
|
||
| const assertMessage = (assertionName, message, received, expected) => () => | ||
| `${matcherHint(`${assertionName}`, 'received', '')} \n${message}: ` + | ||
| `${printExpected(expected)} \nReceived: ${printReceived(received)}` | ||
|
|
||
| const extensions = { | ||
| toBeInTheDOM(received) { | ||
| getDisplayName(received) | ||
| if (received) { | ||
| return { | ||
| message: () => | ||
| `${matcherHint( | ||
| '.not.toBeInTheDOM', | ||
| 'received', | ||
| '', | ||
| )} Expected the element not to be present` + | ||
| `\nReceived : ${printReceived(received)}`, | ||
| pass: true, | ||
| } | ||
| } else { | ||
| return { | ||
| message: () => | ||
| `${matcherHint( | ||
| '.toBeInTheDOM', | ||
| 'received', | ||
| '', | ||
| )} Expected the element to be present` + | ||
| `\nReceived : ${printReceived(received)}`, | ||
| pass: false, | ||
| } | ||
| } | ||
| }, | ||
|
|
||
| toHaveTextContent(htmlElement, checkWith) { | ||
| if (!(htmlElement instanceof HTMLElement)) | ||
| throw new Error( | ||
| `The given subject is a ${getDisplayName( | ||
| htmlElement, | ||
| )}, not an HTMLElement`, | ||
| ) | ||
|
|
||
| const textContent = htmlElement.textContent | ||
|
||
| const pass = textContent === checkWith | ||
|
||
| if (pass) { | ||
| return { | ||
| message: assertMessage( | ||
| '.not.toHaveTextContent', | ||
| 'Expected value not equals to', | ||
| htmlElement, | ||
| checkWith, | ||
| ), | ||
| pass: true, | ||
| } | ||
| } else { | ||
| return { | ||
| message: assertMessage( | ||
| '.toHaveTextContent', | ||
| 'Expected value equals to', | ||
| htmlElement, | ||
| checkWith, | ||
| ), | ||
| pass: false, | ||
| } | ||
| } | ||
| }, | ||
|
|
||
| toSatisfyDOM(actual, predicate) { | ||
| const pass = predicate(actual) | ||
| if (pass) { | ||
| return { | ||
| message: assertMessage( | ||
| '.not.toSatisfyDOM()', | ||
| 'Expected predicate not equals to true', | ||
| actual, | ||
| predicate, | ||
| ), | ||
| pass: true, | ||
| } | ||
| } else { | ||
| return { | ||
| message: assertMessage( | ||
| '.not.toSatisfyDOM()', | ||
| 'Expected predicate equals to true', | ||
| actual, | ||
| predicate, | ||
| ), | ||
| pass: false, | ||
| } | ||
| } | ||
| }, | ||
| } | ||
|
|
||
| export default extensions | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The problem with this is it means you have to run the build before you can run the tests (because on a fresh clone the
distdirectory doesn't work). It also means that any changes tojest-extensions.jswont be picked up by tests until the next build.Instead, you'll basically need to duplicate the code.
Alternatively... You could put the code that's currently in
extend-expect.jsintosrc/extend-expect.jsand then change the contents of:extend-expect.jsto be simply:require('./dist/extend-expect'). Then you could update this import to simply:'../extend-expect'👍