Is @react-mock/state working for react hooks?

[LiaoJimmy]

Hi, I'm trying to mock state in jest. Here is my hook example code:

// ReactMock.jsx
import React, { useState } from 'react';

const ReactMock = () => {
  const [count, setCount] = useState(0);

  const handlePlusClick = () => {
    setCount(count + 1);
  };

  return (
    <>
      <div>
        Result:
        {' '}
        {count}
      </div>
      <button type="button" onClick={handlePlusClick}>Plus 1</button>
    </>
  );
};

export default ReactMock;

And here is the unit test code:

// ReactMock.test.jsx
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { StateMock } from '@react-mock/state';

import ReactMock from './ReactMock';

describe('<ReactMock />', () => {
  it('should plus 1 after user clicks plus button', () => {
    const { getByText } = render(<ReactMock />);
    const plus = getByText('Plus 1');

    expect(getByText('Result: 0')).toBeInTheDocument();

    fireEvent.click(plus);

    expect(getByText('Result: 1')).toBeInTheDocument();
  });

  it('should plus 1 to 6 if count is 5', () => {
    const { getByText } = render(
      <StateMock state={{ count: 5 }}>
        <ReactMock />
      </StateMock>,
    );
    const plus = getByText('Plus 1');

    expect(getByText('Result: 5')).toBeInTheDocument();

    fireEvent.click(plus);

    expect(getByText('Result: 6')).toBeInTheDocument();
  });
});

But I got an warning on console and the second test failed.

    console.error node_modules/react-dom/cjs/react-dom.development.js:545
      Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

      Check the render method of `StateMock`.
          in ReactMock (at ReactMock.test.jsx:22)
          in StateMock (at ReactMock.test.jsx:21)

  ● <ReactMock /> › should plus 1 to 6 if count is 5

    Unable to find an element with the text: Result: 5. 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.

Is @react-mock/state only working for class component? Or I have to modify my code to fix this failed testing?

[JoMiguelSantos]

I'm having the same issue. For functional components it doesn't seem to be working. Is there anybody maintaining this library?

[LiaoJimmy]

Hi, @JoMiguelSantos . The last commit was on Mar 12, 2019. Maybe this repo is not maintaining now.

[brianjuhl]

@LiaoJimmy @JoMiguelSantos Hey guys -- did either of you find another solution for this? Thanks!

[LiaoJimmy]

@LiaoJimmy @JoMiguelSantos Hey guys -- did either of you find another solution for this? Thanks!

Hi, @brianjuhl Now I don't think mock state is a good testing method. We should follow the testing-library principles.

The more your tests resemble the way your software is used, the more confidence they can give you. https://testing-library.com/docs/guiding-principles

Mock state is not like the way our users use the UI. So I prefer to write the test and simulate the user action. And then the state will also become the value I want. (Although we have to write a little more code.)