I'm having issues getting Chai's expect.to.throw to work in a test for my node.js app. The test keeps failing on the thrown error, but If I wrap the test case in try and catch and assert on the caught error, it works.
Does expect.to.throw not work like I think it should or something?
it('should throw an error if you try to get an undefined property', function (done) {
var params = { a: 'test', b: 'test', c: 'test' };
var model = new TestModel(MOCK_REQUEST, params);
// neither of these work
expect(model.get('z')).to.throw('Property does not exist in model schema.');
expect(model.get('z')).to.throw(new Error('Property does not exist in model schema.'));
// this works
try {
model.get('z');
}
catch(err) {
expect(err).to.eql(new Error('Property does not exist in model schema.'));
}
done();
});
The failure:
19 passing (25ms)
1 failing
1) Model Base should throw an error if you try to get an undefined property:
Error: Property does not exist in model schema.
You have to pass a function to expect. Like this:
expect(model.get.bind(model, 'z')).to.throw('Property does not exist in model schema.');
expect(model.get.bind(model, 'z')).to.throw(new Error('Property does not exist in model schema.'));
The way you are doing it, you are passing to expect the result of calling model.get('z'). But to test whether something is thrown, you have to pass a function to expect, which expect will call itself. The bind method used above creates a new function which when called will call model.get with this set to the value of model and the first argument set to 'z'.
A good explanation of bind can be found here.
As this answer says, you can also just wrap your code in an anonymous function like this:
expect(function(){
model.get('z');
}).to.throw('Property does not exist in model schema.');
And if you are already using ES6/ES2015 then you can also use an arrow function. It is basically the same as using a normal anonymous function but shorter.
expect(() => model.get('z')).to.throw('Property does not exist in model schema.');
This question has many, many duplicates, including questions not mentioning the Chai assertion library. Here are the basics collected together:
The assertion must call the function, instead of it evaluating immediately.
assert.throws(x.y.z);
// FAIL. x.y.z throws an exception, which immediately exits the
// enclosing block, so assert.throw() not called.
assert.throws(()=>x.y.z);
// assert.throw() is called with a function, which only throws
// when assert.throw executes the function.
assert.throws(function () { x.y.z });
// if you cannot use ES6 at work
function badReference() { x.y.z }; assert.throws(badReference);
// for the verbose
assert.throws(()=>model.get(z));
// the specific example given.
homegrownAssertThrows(model.get, z);
// a style common in Python, but not in JavaScript
You can check for specific errors using any assertion library:
Node
assert.throws(() => x.y.z);
assert.throws(() => x.y.z, ReferenceError);
assert.throws(() => x.y.z, ReferenceError, /is not defined/);
assert.throws(() => x.y.z, /is not defined/);
assert.doesNotThrow(() => 42);
assert.throws(() => x.y.z, Error);
assert.throws(() => model.get.z, /Property does not exist in model schema./)
Should
should.throws(() => x.y.z);
should.throws(() => x.y.z, ReferenceError);
should.throws(() => x.y.z, ReferenceError, /is not defined/);
should.throws(() => x.y.z, /is not defined/);
should.doesNotThrow(() => 42);
should.throws(() => x.y.z, Error);
should.throws(() => model.get.z, /Property does not exist in model schema./)
Chai Expect
expect(() => x.y.z).to.throw();
expect(() => x.y.z).to.throw(ReferenceError);
expect(() => x.y.z).to.throw(ReferenceError, /is not defined/);
expect(() => x.y.z).to.throw(/is not defined/);
expect(() => 42).not.to.throw();
expect(() => x.y.z).to.throw(Error);
expect(() => model.get.z).to.throw(/Property does not exist in model schema./);
You must handle exceptions that 'escape' the test
it('should handle escaped errors', function () {
try {
expect(() => x.y.z).not.to.throw(RangeError);
} catch (err) {
expect(err).to.be.a(ReferenceError);
}
});
This can look confusing at first. Like riding a bike, it just 'clicks' forever once it clicks.
examples from doc... ;)
because you rely on this context:
which is lost when the function is invoked by .throw
there’s no way for it to know what this is supposed to be
you have to use one of these options:
wrap the method or function call inside of another function
bind the context
// wrap the method or function call inside of another function
expect(function () { cat.meow(); }).to.throw(); // Function expression
expect(() => cat.meow()).to.throw(); // ES6 arrow function
// bind the context
expect(cat.meow.bind(cat)).to.throw(); // Bind
One other possible implementation, more cumbersome than the .bind() solution, but one that helps to make the point that expect() requires a function that provides a this context to the covered function, you can use a call(), e.g.,
expect(function() {model.get.call(model, 'z');}).to.throw('...');
I have found a nice way around it:
// The test, BDD style
it ("unsupported site", () => {
The.function(myFunc)
.with.arguments({url:"https://www.ebay.com/"})
.should.throw(/unsupported/);
});
// The function that does the magic: (lang:TypeScript)
export const The = {
'function': (func:Function) => ({
'with': ({
'arguments': function (...args:any) {
return () => func(...args);
}
})
})
};
It's much more readable then my old version:
it ("unsupported site", () => {
const args = {url:"https://www.ebay.com/"}; //Arrange
function check_unsupported_site() { myFunc(args) } //Act
check_unsupported_site.should.throw(/unsupported/) //Assert
});
Related
today I encountered that it is impossible to set state in react native using old state value and then utilizing spread operator like this:
setSomeValue(oldValue => {...oldValue, someField: 'newValue'})
it is necessary to add parentheses:
setSomeValue(oldValue => ({...oldValue, someField: 'newValue'}))
and then everything works just fine.
What is the reason?
You define a block of arrow function using {}. So when you do () => {} you are not returning an object. You are returning nothing.
You can update this code to return an object as:
() => {
return { someField: 'newValue' }
}
But JS provides a shortcut to use parenthesis () to create a expression and return it.
So, () => () will return any expression inside second (). So when you do () => ({ someField: 'newValue' }), now you are returning an object directly without creating block and doing an implicit return.
setSomeValue(oldValue => ({...oldValue, someField: 'newValue'}))
is equivalent to the following statement
setSomeValue(oldValue => {
return {...oldValue, someField: 'newValue'};
})
The Problem
I need a way to cy.get elements by trying multiple selectors with retries/timeouts. I'm aware this is not really the intended way to use Cypress and I've read Conditional Testing
but unfortunately this is a requirement. It's intended to provide fallback identifiers.
My attempts so far haven't worked well. I've tried using 'normal' javascript promises with async/await but then cypress complains about mixing promises and commands.
I've commented some test cases below with my expectations and what actually happens.
Example HTML
<!-- example.html -->
<button id="button-1" onclick="this.style.color='red'">my button</button>
Test Cases / My Function
beforeEach(() => {
cy.visit('./example.html')
})
function getWithMultipleSelectors(selectors) {
return new Cypress.Promise(resolve => {
cy.wrap(selectors).each(selector => {
getWithRetries(selector).then(element => {
if (element) resolve(element)
})
// how do I exit out of this .each() early?
// I only know if I found something inside .then() so I can't just do `return false`
})
})
}
function getWithRetries(selector, retries = 3) {
return new Cypress.Promise(resolve => {
cy.wrap([...Array(retries).keys()]).each(attempt => {
cy.log(`attempt nr ${attempt}`)
const element = cy.$$(selector)
cy.log(element, selector)
if (element.length === 1) {
resolve(element[0])
return false // ends .each()
}
cy.wait(1000) // wait before next attempt
})
})
}
// just a sanity check that the button can indeed be found
it('normal get function finds #button-1', () => {
cy.get('#button-1').should('exist').click()
})
// to see what happens if you check existence of null or undefined
// as expected they are considered to not exist
it('cy.wrap() null and undefined', () => {
cy.wrap(undefined).should('not.exist')
cy.wrap(null).should('not.exist')
})
// ends with "expected undefined to exist in the DOM" which somehow passes
// but fails when trying to click()
it('finds the button with one selector', () => {
getWithMultipleSelectors(['#button-1']).then(element => {
cy.wrap(element).should('exist').click()
})
})
// ends with "expected undefined to exist in the DOM" which somehow passes
// but fails when trying to click()
it('finds the button with two selectors', () => {
getWithMultipleSelectors(['#does-not-exist', '#button-1']).then(element => {
cy.wrap(element).should('exist').click()
})
})
// this test should FAIL but it doesn't
it('fails if no selector matches', () => {
getWithMultipleSelectors(['#does-not-exist']).then(element => {
cy.wrap(element).should('not.exist').click()
})
})
Versions Used
Cypress package version: 7.5.0
Cypress binary version: 7.5.0
Electron version: 12.0.0-beta.14
Bundled Node version:
14.15.1
Added this function that seems to be working for me for getting an element by any of the selectors in an array.
Cypress.Commands.add('getMulti', (selectors) => {
cy.document().then(($document) => {
selectors.forEach(selector => {
if($document.querySelector(selector)){
return cy.get(selector).first()
}
})
})
})
This is a follow up question to this question.
I have a function called assertTruthy for Jest. assertTruthy(msg, fn, args), expects a message, a function and arguments and should pass if the thing that is returned when the function is invoked with the arguments is truthy and fail if its not.
I want to extend it to also support Jest's only and skip.
Here is what I wrote:
assertTruthy.skip = ({
message = '',
fn = undefined,
args,
} = {}) => {
it.skip(message, () => {
expect(fn(args)).toBeTruthy();
});
};
assertTruthy.only = ({
message = '',
fn = undefined,
args,
} = {}) => {
it.only(message, () => {
expect(fn(args)).toBeTruthy();
});
};
How would I test these functions?
Here is what I tried, which works, but I'm not sure if this is correct.
describe('skip()', () => {
test('it skips the function', () => {
it.skip = jest.fn();
assertTruthy.skip({
message: 'something',
fn: () => true,
args: undefined,
});
expect(it.skip).toHaveBeenCalledTimes(1);
});
});
This looks like a fair enough test that your assertTruthy skip and only call Jest's it skip and only methods.
You might want to assert that it also calls them with the arguments you expect using toHaveBeenCalledWith.
Can you please elaborate more, what you want to achieve and I did't get it properly why you want to extend jest skip and only methods to achieve the same thing that you are already testing.
But if you only want to test if a function not been invoked/executed with toHaveBeenCalledTimes() based on the arguments to be truthy/falsy then you are doing it right.
I have function that uses puppetteer's page object to evaluate and return some data.
I would like to write a unit test with jest to check if page.evaluate() takes specified parameters
This is the function
async function cinemasfromState(page, state) {
const CINEMA_SELECTOR = `div[data-state=$[STATE]] div.top-select-option a.eccheckbox`;
let res = await page.evaluate(
(elementPath, state) => {
let results = Array.from(document.querySelectorAll(elementPath)).map(
function(cin, index) {
return {
//Stuff
};
return result;
},
{ state }
);
},
CINEMA_SELECTOR.replace("$[STATE]", state),
state
);
return res;
}
Below is what my test looks like
describe("cinemasfromState", () => {
let page_mock = {
click: jest.fn(() => Promise.resolve()),
evaluate: jest.fn((selector, state) => Promise.resolve())
};
test("page.evaluate called correctly ", async () => {
await cinemasfromState(page_mock, "KAN");
expect(page_mock.evaluate).toBeCalledTimes(1);
expect(
page_mock.evaluate)toBeCalledWith(
"div[data-state=KAN] div.top-select-option a.eccheckbox",
"KAN"
);
});
});
And I get the below error as my test output
● cinemasfromState › page.evaluate called correctly
expect(jest.fn()).toBeCalledWith(expected)
Expected mock function to have been called with:
"div[data-state=KAN] div.top-select-option a.eccheckbox"
as argument 1, but it was called with
[Function anonymous].
Difference:
Comparing two different types of values. Expected string but received function.
"KAN"
as argument 2, but it was called with
"div[data-state=KAN] div.top-select-option a.eccheckbox".
undefined
as argument 3, but it was called with
"KAN".
Difference:
Comparing two different types of values. Expected undefined but received string.
52 | expect(page_mock1.evaluate).toBeCalledTimes(1);
53 | expect(page_mock1.evaluate).toBeCalledWith(
> 54 | "div[data-state=KAN] div.top-select-option a.eccheckbox",
| ^
55 | "KAN"
56 | );
57 | });
Any help on writing test to verify the arguments?
If you read your error log, you'll notice it's trying to match three arguments, but you are only asserting against two. .toBeCalledWith in jest will perform an exact match of the arguments passed to the function along with their order.
For instance, if you call func(arg1, arg2), then expect(func).toBeCalledWith(arg2) will fail because you did not also assert on arg1. This is what is happening in your case because the first argument to page.evaluate() is actually an anonymous function.
So, your test will need to be something like this:
expect(page_mock.evaluate).toBeCalledWith(
expect.any(Function),
"div[data-state=KAN] div.top-select-option a.eccheckbox",
"KAN"
);
Is there any way in Jest to mock global objects, such as navigator, or Image*? I've pretty much given up on this, and left it up to a series of mockable utility methods. For example:
// Utils.js
export isOnline() {
return navigator.onLine;
}
Testing this tiny function is simple, but crufty and not deterministic at all. I can get 75% of the way there, but this is about as far as I can go:
// Utils.test.js
it('knows if it is online', () => {
const { isOnline } = require('path/to/Utils');
expect(() => isOnline()).not.toThrow();
expect(typeof isOnline()).toBe('boolean');
});
On the other hand, if I am okay with this indirection, I can now access navigator via these utilities:
// Foo.js
import { isOnline } from './Utils';
export default class Foo {
doSomethingOnline() {
if (!isOnline()) throw new Error('Not online');
/* More implementation */
}
}
...and deterministically test like this...
// Foo.test.js
it('throws when offline', () => {
const Utils = require('../services/Utils');
Utils.isOnline = jest.fn(() => isOnline);
const Foo = require('../path/to/Foo').default;
let foo = new Foo();
// User is offline -- should fail
let isOnline = false;
expect(() => foo.doSomethingOnline()).toThrow();
// User is online -- should be okay
isOnline = true;
expect(() => foo.doSomethingOnline()).not.toThrow();
});
Out of all the testing frameworks I've used, Jest feels like the most complete solution, but any time I write awkward code just to make it testable, I feel like my testing tools are letting me down.
Is this the only solution or do I need to add Rewire?
*Don't smirk. Image is fantastic for pinging a remote network resource.
As every test suite run its own environment, you can mock globals by just overwriting them. All global variables can be accessed by the global namespace:
global.navigator = {
onLine: true
}
The overwrite has only effects in your current test and will not effect others. This also a good way to handle Math.random or Date.now.
Note, that through some changes in jsdom it could be possible that you have to mock globals like this:
Object.defineProperty(globalObject, key, { value, writable: true });
The correct way of doing this is to use spyOn. The other answers here, even though they work, don't consider cleanup and pollute the global scope.
// beforeAll
jest
.spyOn(window, 'navigator', 'get')
.mockImplementation(() => { ... })
// afterAll
jest.restoreAllMocks();
Jest may have changed since the accepted answer was written, but Jest does not appear to reset your global after testing. Please see the testcases attached.
https://repl.it/repls/DecentPlushDeals
As far as I know, the only way around this is with an afterEach() or afterAll() to clean up your assignments to global.
let originalGlobal = global;
afterEach(() => {
delete global.x;
})
describe('Scope 1', () => {
it('should assign globals locally', () => {
global.x = "tomato";
expect(global.x).toBeTruthy()
});
});
describe('Scope 2', () => {
it('should not remember globals in subsequent test cases', () => {
expect(global.x).toBeFalsy();
})
});
If someone needs to mock a global with static properties then my example should help:
beforeAll(() => {
global.EventSource = jest.fn(() => ({
readyState: 0,
close: jest.fn()
}))
global.EventSource.CONNECTING = 0
global.EventSource.OPEN = 1
global.EventSource.CLOSED = 2
})
If you are using react-testing-library and you use the cleanup method provided by the library, it will remove all global declarations made in that file once all tests in the file have run. This will then not carry over to any other tests run.
Example:
import { cleanup } from 'react-testing-library'
afterEach(cleanup)
global.getSelection = () => {
}
describe('test', () => {
expect(true).toBeTruthy()
})
If you need to assign and reassign the value of a property on window.navigator then you'll need to:
Declare a non-constant variable
Return it from the global/window object
Change the value of that original variable (by reference)
This will prevent errors when trying to reassign the value on window.navigator because these are mostly read-only.
let mockUserAgent = "";
beforeAll(() => {
Object.defineProperty(global.navigator, "userAgent", {
get() {
return mockUserAgent;
},
});
});
it("returns the newly set attribute", () => {
mockUserAgent = "secret-agent";
expect(window.navigator.userAgent).toEqual("secret-agent");
});