Develop Reference

Assignment of Nuxt Axios response to variable changes response data content

async fetch() {
try {
console.log(await this.$api.events.all(-1, false)); // <-- First log statement
const res = await this.$api.events.all(-1, false); // <-- Assignment
console.log(res); // <-- Second log statement
if (!this.events) {
this.events = []
}
res.data.forEach((event, index) => {
const id = event.hashid;
const existingIndex = this.events.findIndex((other) => {
return other.hashid = id;
});
if (existingIndex == -1) {
this.events.push(events);
} else {
this.events[existingIndex] = event;
}
});
for (var i = this.events.length - 1; i >= 0; --i) {
const id = this.events[i].hashid
const wasRemoved =
res.data.findIndex((event) => {
return event.hashid == id
}) == -1
if (wasRemoved) {
this.events.splice(i, 1)
}
}
this.$store.commit('cache/updateEventData', {
updated_at: new Date(Date.now()),
data: this.events
});
} catch (err) {
console.log(err)
}
}
// The other functions, maybe this somehow helps
async function refreshTokenFirstThen(adminApi, func) {
await adminApi.refreshAsync();
return func();
}
all(count = -1, description = true) {
const func = () => {
return $axios.get(`${baseURL}/admin/event`, {
'params': {
'count': count,
'description': description ? 1 : 0
},
'headers': {
'Authorization': `Bearer ${store.state.admin.token}`
}
});
}
if (store.getters["admin/isTokenExpired"]) {
return refreshTokenFirstThen(adminApi, func);
}
return func();
},
Both log statements are giving slightly different results even though the same result is expected. But this only happens when is use the function in this specific component. When using the same function in other components, everything works as expected.
First data output:
[
{
"name": "First Name",
"hashid": "VQW9xg7j",
// some more correct attributes
},
{
"name": "Second name",
"hashid": "zlWvEgxQ",
// some more correct attributes
}
]
While the second console.log gives the following output:
[
{
"name": "First Name",
"hashid": "zlWvEgxQ",
// some more correct attributes, but this time with reactiveGetter and reactiveSetter
<get hashid()>: reactiveGetter()
​​ length: 0
​​​​ name: "reactiveGetter"
​​​​ prototype: Object { … }
​​​​<prototype>: function ()
​​​<set hashid()>: reactiveSetter(newVal)
​​​​length: 1
​​​​name: "reactiveSetter"
​​​​prototype: Object { … }
​​​​<prototype>: function ()
},
{
"name": "Second name",
"hashid": "zlWvEgxQ",
// some more correct attributes and still without reactiveGetter and reactiveSetter
}
]
As it can be seen, somehow the value of my hashid attribute changes, when assigning the response of the function call.
The next weird behavior happening here, is that the first object where the hashid field changes also gets reactiveGetter and reactiveSetter (but the second object in the array does not get these).
So it looks to me like something is happening with the assignment that I don't know about. Another guess would be that this has something to do with the Vuex store, because I do not change the Vuex tore in the other place where I use the same function.
It is verified that the backend always sends the correct data, as this is dummy data, consisting of an array with two objects with some attributes. So no other data except this two objects is expected.
Can someone explain to me why this behavior occurs?

There are few problems...
Do not use console.log with objects. Browsers tend to show "live view" of object - reference
this.events.findIndex((other) => { return other.hashid = id; }); is wrong, you are using assignment operator (=) instead of identity operator (===). That's why the hashid of the first element changes...

How to chain suscriptions

Hi I am trying to chain following subscriptions.
changeBranch() {
const bottomSheetRef: MatBottomSheetRef = this.bottomSheet.open(CCSBranchComponent, {
data: this.branches
});
this.subscription.add(bottomSheetRef.instance.change.subscribe((branch: Branch) => {
this.branchInfo = `Description : ${branch.author}\nAuthor : ${branch.id}\nCreated date :${branch.created}`;
this.blockpointBranchForm.get('branch').setValue(branch.id);
}));
this.subscription.add(bottomSheetRef.afterDismissed().subscribe(() => {
this.returnSelectedBranch.emit(this.blockpointBranchForm.get('branch').value);
}));
}
Here if bottomSheetRef.instance.change.subscribe is called before the sheet loads, it throws undefined. So i am trying the implement something that looks like this
this.subscription.add(this.bottomSheet.open(CCSBranchComponent, {
data: this.branches
}).instance.change.subscribe((branch: Branch) => {
this.branchInfo = `Description : ${branch.author}\nAuthor : ${branch.id}\nCreated date :${branch.created}`;
this.blockpointBranchForm.get('branch').setValue(branch.id);
}).afterDismissed().subscribe(() => {
this.returnSelectedBranch.emit(this.blockpointBranchForm.get('branch').value);
}));
Here the second subscribe is called on the subscription returns by first. How do I access the observable in the chain?

I guess what you want is to chain the the actions what are done when subscribing.
You can achieve this by
bottemsheetRef.instance.change.pipe(
switchmap(resultFromChange => bottomSheetRef.afterDismissed
).subsbribe(resultFromAfterDismissed => {// do whatever you like})

Determine which dependency array variable caused useEffect hook to fire

Is there an easy way to determine which variable in a useEffect's dependency array triggers a function re-fire?
Simply logging out each variable can be misleading, if a is a function and b is an object they may appear the same when logged but actually be different and causing useEffect fires.
For example:
React.useEffect(() => {
// which variable triggered this re-fire?
console.log('---useEffect---')
}, [a, b, c, d])
My current method has been removing dependency variables one by one until I notice the behavior that causes excessive useEffect calls, but there must be a better way to narrow this down.

I ended up taking a little bit from various answers to make my own hook for this. I wanted the ability to just drop something in place of useEffect for quickly debugging what dependency was triggering useEffect.
const usePrevious = (value, initialValue) => {
const ref = useRef(initialValue);
useEffect(() => {
ref.current = value;
});
return ref.current;
};
const useEffectDebugger = (effectHook, dependencies, dependencyNames = []) => {
const previousDeps = usePrevious(dependencies, []);
const changedDeps = dependencies.reduce((accum, dependency, index) => {
if (dependency !== previousDeps[index]) {
const keyName = dependencyNames[index] || index;
return {
...accum,
[keyName]: {
before: previousDeps[index],
after: dependency
}
};
}
return accum;
}, {});
if (Object.keys(changedDeps).length) {
console.log('[use-effect-debugger] ', changedDeps);
}
useEffect(effectHook, dependencies);
};
Below are two examples. For each example, I assume that dep2 changes from 'foo' to 'bar'. Example 1 shows the output without passing dependencyNames and Example 2 shows an example with dependencyNames.
Example 1
Before:
useEffect(() => {
// useEffect code here...
}, [dep1, dep2])
After:
useEffectDebugger(() => {
// useEffect code here...
}, [dep1, dep2])
Console output:
{
1: {
before: 'foo',
after: 'bar'
}
}
The object key '1' represents the index of the dependency that changed. Here, dep2 changed as it is the 2nd item in the dependency, or index 1.
Example 2
Before:
useEffect(() => {
// useEffect code here...
}, [dep1, dep2])
After:
useEffectDebugger(() => {
// useEffect code here...
}, [dep1, dep2], ['dep1', 'dep2'])
Console output:
{
dep2: {
before: 'foo',
after: 'bar'
}
}

#simbathesailor/use-what-changed works like a charm!
Install with npm/yarn and --dev or --no-save
Add import:
import { useWhatChanged } from '#simbathesailor/use-what-changed';
Call it:
// (guarantee useEffect deps are in sync with useWhatChanged)
let deps = [a, b, c, d]
useWhatChanged(deps, 'a, b, c, d');
useEffect(() => {
// your effect
}, deps);
Creates this nice chart in the console:
There are two common culprits:
Some Object being pass in like this:
// Being used like:
export function App() {
return <MyComponent fetchOptions={{
urlThing: '/foo',
headerThing: 'FOO-BAR'
})
}
export const MyComponent = ({fetchOptions}) => {
const [someData, setSomeData] = useState()
useEffect(() => {
window.fetch(fetchOptions).then((data) => {
setSomeData(data)
})
}, [fetchOptions])
return <div>hello {someData.firstName}</div>
}
The fix in the object case, if you can, break-out a static object outside the component render:
const fetchSomeDataOptions = {
urlThing: '/foo',
headerThing: 'FOO-BAR'
}
export function App() {
return <MyComponent fetchOptions={fetchSomeDataOptions} />
}
You can also wrap in useMemo:
export function App() {
return <MyComponent fetchOptions={
useMemo(
() => {
return {
urlThing: '/foo',
headerThing: 'FOO-BAR',
variableThing: hash(someTimestamp)
}
},
[hash, someTimestamp]
)
} />
}
The same concept applies to functions to an extent, except you can end up with stale closures.

UPDATE
After a little real-world use, I so far like the following solution which borrows some aspects of Retsam's solution:
const compareInputs = (inputKeys, oldInputs, newInputs) => {
inputKeys.forEach(key => {
const oldInput = oldInputs[key];
const newInput = newInputs[key];
if (oldInput !== newInput) {
console.log("change detected", key, "old:", oldInput, "new:", newInput);
}
});
};
const useDependenciesDebugger = inputs => {
const oldInputsRef = useRef(inputs);
const inputValuesArray = Object.values(inputs);
const inputKeysArray = Object.keys(inputs);
useMemo(() => {
const oldInputs = oldInputsRef.current;
compareInputs(inputKeysArray, oldInputs, inputs);
oldInputsRef.current = inputs;
}, inputValuesArray); // eslint-disable-line react-hooks/exhaustive-deps
};
This can then be used by copying a dependency array literal and just changing it to be an object literal:
useDependenciesDebugger({ state1, state2 });
This allows the logging to know the names of the variables without any separate parameter for that purpose.

As far as I know, there's no really easy way to do this out of the box, but you could drop in a custom hook that keeps track of its dependencies and logs which one changed:
// Same arguments as useEffect, but with an optional string for logging purposes
const useEffectDebugger = (func, inputs, prefix = "useEffect") => {
// Using a ref to hold the inputs from the previous run (or same run for initial run
const oldInputsRef = useRef(inputs);
useEffect(() => {
// Get the old inputs
const oldInputs = oldInputsRef.current;
// Compare the old inputs to the current inputs
compareInputs(oldInputs, inputs, prefix)
// Save the current inputs
oldInputsRef.current = inputs;
// Execute wrapped effect
func()
}, inputs);
};
The compareInputs bit could look something like this:
const compareInputs = (oldInputs, newInputs, prefix) => {
// Edge-case: different array lengths
if(oldInputs.length !== newInputs.length) {
// Not helpful to compare item by item, so just output the whole array
console.log(`${prefix} - Inputs have a different length`, oldInputs, newInputs)
console.log("Old inputs:", oldInputs)
console.log("New inputs:", newInputs)
return;
}
// Compare individual items
oldInputs.forEach((oldInput, index) => {
const newInput = newInputs[index];
if(oldInput !== newInput) {
console.log(`${prefix} - The input changed in position ${index}`);
console.log("Old value:", oldInput)
console.log("New value:", newInput)
}
})
}
You could use this like this:
useEffectDebugger(() => {
// which variable triggered this re-fire?
console.log('---useEffect---')
}, [a, b, c, d], 'Effect Name')
And you would get output like:
Effect Name - The input changed in position 2
Old value: "Previous value"
New value: "New value"

There’s another stack overflow thread stating you can use useRef to see a previous value.
https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state

The React beta docs suggest these steps:
Log your dependency array with console.log:
const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
console.log([todos, tab]);
Right-click on the arrays from different re-renders in the console and select “Store as a global variable” for both of them. It may be important not to compare two sequential ones if you are in strict mode, I'm not sure.
Compare each of the dependencies:
Object.is(temp1[0], temp2[0]); // Is the first dependency the same between the arrays?

This question was answered with several good and working answers, but I just didn't like the DX of any of them.
so I wrote a library which logs the dependencies that changed in the easiest way to use + added a function to log a deep comparison between 2 objects, so you can know what exactly changed inside your object.
I called it: react-what-changed
The readme has all of the examples you need.
The usage is very straight forward:
npm install react-what-changed --save-dev
import { reactWhatChanged as RWC } from 'react-what-changed';
function MyComponent(props) {
useEffect(() => {
someLogic();
}, RWC([somePrimitive, someArray, someObject]));
}
In this package you will also find 2 useful functions for printing deep comparison (diffs only) between objects. for example:
import { reactWhatDiff as RWD } from 'react-what-changed';
function MyComponent(props) {
useEffect(() => {
someLogic();
}, [somePrimitive, someArray, someObject]);
RWD(someArray);
}

test case failing due to .map is not a function error

Hi i have a react component expenses-total.js and a corresponding test case expenses-total.test.js as shown below.
expenses-total.js
export default (expenses=[]) => {
if (expenses.length === 0) {
return 0;
} else {
return expenses
.map(expense => expense.amount)
.reduce((sum, val) => sum + val, 0);
}
};
expenses-total.test.js
import selectExpensesTotal from '../../selectors/expenses-total';
const expenses = [
{
id: "1",
description: "gum",
amount: 321,
createdAt: 1000,
note: ""
},
{
id: "2",
description: "rent",
amount: 3212,
createdAt: 4000,
note: ""
},
{
id: "3",
description: "Coffee",
amount: 3214,
createdAt: 5000,
note: ""
}
];
test('Should return 0 if no expenses', ()=>{
const res = selectExpensesTotal([]);
expect(res).toBe(0);
});
test('Should correctly add up a single expense', ()=>{
const res = selectExpensesTotal(expenses[0]);
expect(res).toBe(321);
});
test('Should correctly add up multiple expenses',()=>{
const res = selectExpensesTotal(expenses);
expect(res).toBe(6747);
});
when i run the test case, its getting failed by giving an error
TypeError: expenses.map is not a function
I know the test case is correct but dont know what is wrong with thecomponent.
Could anyone please help me in fixing this error?

The problem is with if (expenses.length === 0) and the test case that uses selectExpensesTotal(expenses[0]):
expenses[0] passes an object, which has no length property, so in the function being tested, expenses.length returns undefined. However, undefined === 0 evaluates to false so your code goes into the else block tries to use .map on the object, which doesn't have that function, thus it throws an error.

In a brief: you can't map over an object.
expenses is an array of objects, so expenses[0] is an object.
Condition expenses.length === 0 evaluates to false, since obviously .length property does not exist on Object.prototype, so the else condition takes place - your function tries to map over an object.

The problem is that expenses[0] is an object (you probably expected it to be an array) and an object does not have a map function. A quick hack would be to add another ifs into the loop to check if expenses is actually an object. So that:
export default (expenses=[]) => {
if (expenses.length === 0) {
return 0;
} else {
if (typeof expenses === 'object') {
return expenses.amount
} else {
return expenses
.map(expense => expense.amount)
.reduce((sum, val) => sum + val, 0);
}
}
};
I hope this help.

To fix this error, you can pass in an array of object into
selectExpensesTotal([expenses[0]])
rather than just an object
selectExpensesTotal(expenses[0])
So your code show look like this:
test('Should correctly add up a single expense', ()=>{
const res = selectExpensesTotal([expenses[0]]);
expect(res).toBe(321);
});
.map function will now work on expenses. Because, this is now an array of object ( works with map function ) and not an object(This does not work with map function)

How to add custom message to Jest expect?

Image following test case:
it('valid emails checks', () => {
['abc#y.com', 'a#b.nz'/*, ...*/].map(mail => {
expect(isValid(mail)).toBe(true);
});
});
I would like to add auto-generated message for each email like Email 'f#f.com' should be valid so that it's easy to find failing test cases.
Something like:
// .map(email =>
expect(isValid(email), `Email ${email} should be valid`).toBe(true);
Is it possible in Jest ?
In Chai it was possible to do with second parameter like expect(value, 'custom fail message').to.be... and in Jasmine seems like it's done with .because clause. But cannot find solution in Jest.

You try this lib that extends jest: https://github.com/mattphillips/jest-expect-message
test('returns 2 when adding 1 and 1', () => {
expect(1 + 1, 'Woah this should be 2!').toBe(3);
});

I don't think it's possible to provide a message like that. But you could define your own matcher.
For example you could create a toBeValid(validator) matcher:
expect.extend({
toBeValid(received, validator) {
if (validator(received)) {
return {
message: () => `Email ${received} should NOT be valid`,
pass: true
};
} else {
return {
message: () => `Email ${received} should be valid`,
pass: false
};
}
}
});
And then you use it like this:
expect(mail).toBeValid(isValid);
Note: toBeValid returns a message for both cases (success and failure), because it allows you to use .not. The test will fail with the corresponding message depending on whether you want it to pass the validation.
expect(mail).toBeValid(isValid);
// pass === true: Test passes
// pass === false: Failure: Email ... should be valid
expect(mail).not.toBeValid(isValid);
// pass === true: Failure: Email ... should NOT be valid
// pass === false: Test passes

Although it's not a general solution, for the common case of wanting a custom exception message to distinguish items in a loop, you can instead use Jest's test.each.
For example, your sample code:
it('valid emails checks', () => {
['abc#y.com', 'a#b.nz'/*, ...*/].map(mail => {
expect(isValid(mail)).toBe(true);
});
});
Could instead become
test.each(['abc#y.com', 'a#b.nz'/*, ...*/])(
'checks that email %s is valid',
mail => {
expect(isValid(mail)).toBe(true);
}
);

2021 answer
I did this in some code I was writing for Mintbean by putting my it blocks inside forEach.
By doing this, I was able to achieve a very good approximation of what you're describing.
Pros:
Excellent "native" error reports
Counts the assertion as its own test
No plugins needed.
Here's what your code would look like with my method:
// you can't nest "it" blocks within each other,
// so this needs to be inside a describe block.
describe('valid emails checks', () => {
['abc#y.com', 'a#b.nz'/*, ...*/].forEach(mail => {
// here is where the magic happens
it(`accepts ${mail} as a valid email`, () => {
expect(isValid(mail)).toBe(true);
})
});
});
Errors then show up like this.
Notice how nice these are!
FAIL path/to/your.test.js
● valid emails checks › accepts abc#y.com as a valid email
expect(received).toBe(expected)
Expected: "abc#y.com"
Received: "xyz#y.com"
19 | // here is where the magic happens
20 | it(`accepts ${mail} as a valid email`, () => {
> 21 | expect(isValid(mail)).toBe(true);
^
22 | })

You can use try-catch:
try {
expect(methodThatReturnsBoolean(inputValue)).toBeTruthy();
}
catch (e) {
throw new Error(`Something went wrong with value ${JSON.stringify(inputValue)}`, e);
}

Another way to add a custom error message is by using the fail() method:
it('valid emails checks', (done) => {
['abc#y.com', 'a#b.nz'/*, ...*/].map(mail => {
if (!isValid(mail)) {
done.fail(`Email '${mail}' should be valid`)
} else {
done()
}
})
})

Just had to deal with this myself I think I'll make a PR to it possibly: But this could work with whatever you'd like. Basically, you make a custom method that allows the curried function to have a custom message as a third parameter.
It's important to remember that expect will set your first parameter (the one that goes into expect(akaThisThing) as the first parameter of your custom function.
For a generic Jest Message extender which can fit whatever Jest matching you'd already be able to use and then add a little bit of flourish:
expect.extend({
toEqualMessage(received, expected, custom) {
let pass = true;
let message = '';
try {
// use the method from Jest that you want to extend
// in a try block
expect(received).toEqual(expected);
} catch (e) {
pass = false;
message = `${e}\nCustom Message: ${custom}`;
}
return {
pass,
message: () => message,
expected,
received
};
}
});
declare global {
// eslint-disable-next-line #typescript-eslint/no-namespace
namespace jest {
// eslint-disable-next-line #typescript-eslint/naming-convention
interface Matchers<R> {
toEqualMessage(a: unknown, b: string): R;
}
}
}
Will show up like:
Error: expect(received).toEqual(expected) // deep equality
Expected: 26
Received: 13
Custom Message: Sad Message Indicating failure :(
For specific look inside the expect(actualObject).toBe() in case that helps your use case:
import diff from 'jest-diff'
expect.extend({
toBeMessage (received, expected, msg) {
const pass = expected === received
const message = pass
? () => `${this.utils.matcherHint('.not.toBe')}\n\n` +
`Expected value to not be (using ===):\n` +
` ${this.utils.printExpected(expected)}\n` +
`Received:\n` +
` ${this.utils.printReceived(received)}`
: () => {
const diffString = diff(expected, received, {
expand: this.expand
})
return `${this.utils.matcherHint('.toBe')}\n\n` +
`Expected value to be (using ===):\n` +
` ${this.utils.printExpected(expected)}\n` +
`Received:\n` +
` ${this.utils.printReceived(received)}` +
`${(diffString ? `\n\nDifference:\n\n${diffString}` : '')}\n` +
`${(msg ? `Custom:\n ${msg}` : '')}`
}
return { actual: received, message, pass }
}
})
// usage:
expect(myThing).toBeMessage(expectedArray, ' was not actually the expected array :(')

you can use this: (you can define it inside the test)
expect.extend({
ToBeMatch(expect, toBe, Msg) { //Msg is the message you pass as parameter
const pass = expect === toBe;
if(pass){//pass = true its ok
return {
pass: pass,
message: () => 'No ERRORS ',
};
}else{//not pass
return {
pass: pass,
message: () => 'Error in Field '+Msg + ' expect ' + ' ('+expect+') ' + 'recived '+'('+toBe+')',
};
}
}, });
and use it like this
let z = 'TheMassageYouWantWhenErrror';
expect(first.name).ToBeMatch(second.name,z);

I end up just testing the condition with logic and then using the fail() with a string template.
i.e.
it('key should not be found in object', () => {
for (const key in object) {
if (Object.prototype.hasOwnProperty.call(object, key)) {
const element = object[key];
if (element["someKeyName"] === false) {
if (someCheckerSet.includes(key) === false) {
fail(`${key} was not found in someCheckerSet.`)
}
}

To expand on #Zargold's answer:
For more options like the comment below, see MatcherHintOptions doc
// custom matcher - omit expected
expect.extend({
toBeAccessible(received) {
if (pass) return { pass };
return {
pass,
message: () =>
`${this.utils.matcherHint('toBeAccessible', 'received', '', {
comment: 'visible to screen readers',
})}\n
Expected: ${this.utils.printExpected(true)}
Received: ${this.utils.printReceived(false)}`,
};
}
// custom matcher - include expected
expect.extend({
toBeAccessible(received) {
if (pass) return { pass };
return {
pass,
message: () =>
`${this.utils.matcherHint('toBeAccessible', 'received', 'expected', { // <--
comment: 'visible to screen readers',
})}\n
Expected: ${this.utils.printExpected(true)}
Received: ${this.utils.printReceived(false)}`,
};
}

You can rewrite the expect assertion to use toThrow() or not.toThrow(). Then throw an Error with your custom text. jest will include the custom text in the output.
// Closure which returns function which may throw
function isValid (email) {
return () => {
// replace with a real test!
if (email !== 'some#example.com') {
throw new Error(`Email ${email} not valid`)
}
}
}
expect(isValid(email)).not.toThrow()

I'm usually using something like
it('all numbers should be in the 0-60 or 180-360 range', async () => {
const numbers = [0, 30, 180, 120];
for (const number of numbers) {
if ((number >= 0 && number <= 60) || (number >= 180 && number <= 360)) {
console.log('All good');
} else {
expect(number).toBe('number between 0-60 or 180-360');
}
}
});
Generates:

Instead of using the value, I pass in a tuple with a descriptive label. For example, when asserting form validation state, I iterate over the labels I want to be marked as invalid like so:
errorFields.forEach((label) => {
const field = getByLabelText(label);
expect(field.getAttribute('aria-invalid')).toStrictEqual('true');
});
Which gives the following error message:
expect(received).toStrictEqual(expected) // deep equality
- Expected - 1
+ Received + 1
Array [
"Day",
- "false",
+ "true",
]