Can't test react hooks

[reneolivo]

What happens?

Tests using hooks fail because umi and umi-test import their own versions of react.

When running tests the following error will be thrown:

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
    See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

As you'll see in the code examples the hooks are implemented just like React suggests so issue 2 is not the culprit.

After running npm list react and getting the following output I believe it might come down to issue 1 or 3:

➜  umi-issue git:(master) npm list react
ant-design-pro@2.3.1 umi-issue
└─┬ umi@2.6.17
  └─┬ umi-build-dev@1.8.4
    ├── react@16.8.3 
    └─┬ umi-test@1.5.7
      └── react@16.8.3 

As you can see, react is being included multiple times, with a different version for some of them.

Mini Showcase Repository(REQUIRED)

Repo:
https://github.com/reneolivo/umi-issue

Featured code

// src/hooks/useCustomHook.js
import { useState } from 'react';

export default function useCustomHook() {
  const [greeting] = useState('Hello World');

  return greeting;
}

// src/hooks/useCustomHook.test.js
import useCustomHook from './useCustomHook';

describe('Custom Hooks', () => {
  let greeting;

  beforeEach(() => {
    greeting = useCustomHook();
  });

  it('sets a default greeting', () => {
    expect(greeting).toBe('Hello World');
  });
});

How To Reproduce

Steps to reproduce the behavior:

1. Run npm run test
2. Tests fail with:
   

Expected behavior

1. Run npm run test
2. Tests should pass successfully.

Context

• Umi Version: 2.6.17
• Node Version: v10.15.0
• Platform: macOS

[sorrycc]

This is a test method problem, try to test hooks with react-hooks-testing-library.

sorrycc-test-umi.zip

[reneolivo]

@sorrycc thanks a lot for the reply. I was not aware of this library. I can confirm that it works with Umi.

Side question: is there a reason why there are two react versions? One for the project itself, and one included by umi.