使用React Testing Library测试Redux-connected组件
使用React Testing Library测试Redux-connected组件是一种非常常见的场景。然而，如果没有适当的工具，可能会变得有点复杂，你可能会重复自己。特别是在编写连接到redux store的样板代码时，这一点尤为真实。
下面是一个简单的实用函数，改编自React Testing Library关于此主题的文档，可以帮助你加快测试速度：
```jsx [test/utils/renderConnected.js] import React from 'react'; import { render } from '@testing-library/react'; import { createStore } from 'redux'; import { Provider } from 'react-redux'; // 根据你的项目，用适当的导入语句替换这些 import { reducer, reducerInitialState } from './myReduxStore';
const renderConnected = (
ui, {
initialState = reducerInitialState,
store = createStore(reducer, initialState),
...renderOptions
} = {}
) => {
const Wrapper = ({ children }) => (
export default renderConnected;
这个实用函数使用`createStore`函数和`<Provider>`组件将redux-connected组件包装到传递的状态中。然后，它使用React Testing Library的`render`函数最终渲染结果。
记得用适当的文件和导出替换`import`语句，以便根据需要设置实用函数。在创建实用函数并将其保存在适当的文件中后，你可以像这样使用它：
```jsx [test/SomeComponent.test.jsx]
import React from 'react';
// 根据你的组件位置，用适当的导入语句替换这些
import SomeComponent from 'src/components/SomeComponent';
// 根据你的测试实用工具位置，用适当的导入语句替换这些
import renderConnected from 'src/test/utils/renderConnected';
describe('<SomeComponent/>', () => {
let wrapper, getByText;
const initialState = {
// ... 在这里添加你的初始测试状态
};
```javascript
beforeEach(() => {
const utils = renderConnected(<SomeComponent />, { initialState });
wrapper = utils.container;
getByText = utils.getByText;
});
it('渲染组件', () => {
expect(wrapper.querySelector('.some-component')).toBeInTheDocument();
});