我正在尝试编写一些测试,并使用react-testing-library测试我的redux表单。没问题,要安装组件并测试一些元素,但是一旦我尝试使用fireEvent模拟动作,我就会出错。
这里是我用来包装经过测试的组件的提供程序。
const ProviderWrapper = ({ children, store }) => (
<Provider store={store}>
<ConnectedRouter history={history}>
{ children }
</ConnectedRouter>
</Provider>
)
const withProvider = ({children}) => {
return (
<ProviderWrapper store={store}>
{ children }
</ProviderWrapper>
)}
export default withProvider
Here are my test. The first one pass, but the second failed with the error previously describe.It only happen when i use the fireEvent Function.
describe('Filter Sector', () => {
afterEach(cleanup);
const mockFilterSector = {
name:'Secteur d\'activité',
formPropertyName:'sector',
options:[{name:"test", value:"test"}, {name:"test1", value:"test2"}]
};
const Form = () => {
//const state = useSelector(state => state);
const handleSubmit = () => {
console.log("HandleSubmit::")
};
return (
<form onSubmit={handleSubmit}>
<FilterSelect
{...mockFilterSector}
/>
</form>
)
};
describe('Default', () => {
it('the filter element should be Secteur d\' activité when nothing is selected', () => {
const { getByText } = render(<WithProvider><Form /></WithProvider>);
const text = getByText(mockFilterSector.name);
expect(text).toBeDefined();
});
it('on click it should display all it s element', async () => {
const { asFragment, getByText } = render(<WithProvider><Form /></WithProvider>);
console.log("AsFragment::", asFragment());
expect(getByText(mockFilterSector.name)).toBeDefined();
const element = getByText(mockFilterSector.name);
fireEvent.click(element);
//rerender(<WithProvider><Form /></WithProvider>);
const text = getByText('test');
expect(text).toBeDefined();
});
})
});
我希望我的考试通过,但实际错误为
“字段必须在用reduxForm()装饰的组件内部”
仅在第二次测试中发生。第一次通过。