import React from 'react';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import { render, screen, fireEvent } from '@testing-library/react';
import MyApp from './MyApp ';
const initialState = {};
const mockStore = configureStore(initialState);
describe('<MyApp />', () => {
it('click button and shows modal', () => {
render(
<Provider store={mockStore}>
<MyApp />
</Provider>
);
fireEvent.click(screen.getByText('ADD MIOU'));
expect(queryByText('Add MIOU Setting')).toBeInTheDocument();
});
});
我正在使用jest和redux工具包与reactjs
,并试图模拟一个商店写一个测试。但得到以下错误
- 类型错误:store.getState不是函数**
有什么办法能弥补吗?我错过什么了吗?
4条答案
按热度按时间n9vozmp41#
我假设您正在尝试测试一个连接的组件,并且您希望(1)运行操作创建器和简化器,以及(2)作为测试的一部分更新redux状态。
我没有使用过redux-mock-store,但是我在their documentation上看到了下面的注解,这让我相信这个库可能不会像您期望的那样工作:
请注意,这个库被设计用来测试与操作相关的逻辑,而不是与reducer相关的逻辑。换句话说,它不会更新Redux存储。
我建议您尝试使用这种方法测试连接组件,我已经使用这种方法编写了更新redux状态和呈现连接组件的测试。
首先,重写RTL
render
方法:然后直接引用新的render方法而不是RTL,还可以为测试提供初始状态。
(All从redux.js.org复制的代码)
kqqjbcuj2#
我遇到了和你一样的问题,但是感谢@srk链接Redux文档和React测试库文档,我找到了一个非常好的解决方案,适合我使用TypeScript:
然后,您只需要将带有preloadedState属性的对象作为第二个参数传递给您的呈现器;如果你想的话,你甚至可以用"store"属性定义一个新的商店。
vatpfxk53#
我找不到其他地方来粘贴我关于redux工具包和redux模拟存储的发现。
1tu0hz3e4#
自2023年1月起不再建议在redux、see the docs here和this answer for more information中模拟商店。