如何修复React Redux Provider和连接不可用

Question

我想用redu&飞节

使用默认的react-cli测试框架jest，我制作了这个测试文件

import React from "react";
import { render as rtlRender, fireEvent, screen } from "@testing-library/react";
import { createStore } from "redux";
import RRdx, { Provider } from "react-redux";
import MyComponent from "./";
/* some code */
console.log("the source of my paint", RRdx, Provider);
function render(ui, storeData) {
const store = getStore(storeData);
const Wrapper = function ({ children }) {
return <Provider store={store}>{children}</Provider>; // this pops an error
};
return rtlRender(ui, { wrapper: Wrapper });
}
/* the rest of the test */

控制台打印输出：

console.log src/components/MyComponent/MyComponent.test.js:55
the source of my paint { useDispatch: [Function: useDispatch] } undefined
console.error node_modules/react/cjs/react.development.js:315
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at MyComponent.test.js:53.
in Wrapper

那么，？我在测试设置中缺少什么来查看提供商？(也连接，但我找到了一个很好的解决方法(

我遵循react和redux官方测试指南(无需enzime(。

Answer 1

您可以将其添加到您的jest配置中，它将模拟useSelector和useDispatch挂钩，但将保持react-redux的其余部分(包括Provider(不变。

jest.mock('react-redux', () => {
return {
...jest.requireActual('react-redux'),
useSelector: jest.fn().mockImplementation(() => ({})),
useDispatch: () => jest.fn(),
};
});

Answer 2

最后，其他一些测试脚本嘲笑了react redux中的这些属性，所以从副作用行为来看，我得到了这些错误。