antoinejaussoin / jooks Goto Github PK

Context

According to the official documentation of effects with cleanup, an effect can return a Function that will be used called before the next call of the effect.

This method is called to cleanup the effect on unmount but also to cleanup the effect of the previous render if the dependency changed.
This is useful to cleanup events and references on unmount, or to debounce, discard or cancel async events that can happen is any order.

Problems

1. This cleanup is not called by jooks in between effects executions.
2. We miss a way to simulate the unmount of the hook to check that our hook is clean.

Cool project nevertheless, very useful to test hooks in a more functional way.

update your react dependency to 18

When using jooks.run(arg) to call hooks with arguments, subsequent renders caused by other methods (like jooks.wait()) fail because the hook is called without the argument. Take the following (contrived) example:
`import React from 'react'
import init from 'jooks';

const hook = arg => React.useState(arg.foo)

describe('problem using run argument and wait', () => {
const jooks = init(hook)

it('will fail on wait', async () => {
const obj = {
foo: 7
}
const [ val ] = jooks.run(obj)
expect(val).toBe(7)
await jooks.wait()
jooks.run(obj)
expect(val).toBe(7)
})
})
`
In a real example (as in our code in which I found the problem), the simple hook would instead be something complicated that depends on its argument for more than just the initial value of the state, and with effects requiring the jooks.wait() call.

When you run this test, it throws an exception during the render() call caused by the jooks.wait().

I recently found out about this package, and I'm really impressed by it. I am currently struggling to use it with a custom hook that uses the react-redux package, however. My custom hook looks something like this:

import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';

const useMyHook = () => {
  const { foo, bar } = useSelector((state) => ({
      foo: state.data.foo,
      bar: state.data.bar,
  });

  const [myValue, setMyValue] = useState('');

  useEffect(() => {
     setMyValue(foo + bar);
  }, [foo, bar]);

  return myValue
}

Has anyone figured out a clean way to write a unit test with jooks that can initialize useMyHook with some mock redux-store data? It would also be great to find a solution that can initialize the hook, and then update the redux state to trigger the useEffect call, as well.

I noticed that in your examples you always return the state variables and functions.
Example:

import { useState } from 'react';

export default () => {
  const [first, setFirst] = useState('alpha');
  const [second, setSecond] = useState('beta');
  const [third, setThird] = useState(() => 'charlie');
  const update = () => {
    setFirst(first + 'a');
    setSecond(second + 'b');
    setThird(third + 'c');
  };
  return { first, second, third, update };
};

What about if I return my jsx/view including the state. In my test it then has a problem finding the state from the hooks i wanted to test.

Example:

import { useState } from 'react';

export default () => {
  const [first, setFirst] = useState('alpha');
  const [second, setSecond] = useState('beta');
  const [third, setThird] = useState(() => 'charlie');
  const update = () => {
    setFirst(first + 'a');
    setSecond(second + 'b');
    setThird(third + 'c');
  };
  return ( 
          <h1>{first}</h1>
         <h2>{second}<h2>
         ) ;
};

Then the tests won't work

Can you help?

Edit :
Maybe it makes sense to mention my need for this. When I build a component where I am using hooks, those components are usually returning some sort of HTML right. I cannot just return the variables of the component like the state and that is it. I need to be able to test the hooks even when I return HTML