0

我正在编写一个响应本机的单元测试，以根据从 redux 存储中获取的数据类型来显示某些内容。对于当前的实现，假设如果 details 对象的 category 属性的值设置为'first' ，我将显示标题为First Time ，否则如果 value 设置为'duplicate' ，我将显示Already There。

组件.js

// All the appropriate and required imports have been done. 

const [heading,setHeading] = useState('');
const { details, id } = useSelector(state => state.data);

React.useEffect(()=>{
  if(details.category === 'duplicate')
  setHeading('Already There')
  else
  setHeading('First time')
},[])

return (
  <Text>{heading}</Text>
)

组件.test.js

import { render } from '@testing-library/react-native';
import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';

describe('Component',()=>{
it('Should contain Already There text', () => {
    const middlewares = [thunk];
    const mockStore = configureStore(middlewares);
    let getByText = null;
    const store = mockStore({
      ...initialData,
      data:{
        id:'XYZ',
        details:{
          category:'',
          ......
        }
      }
    });
    const mockNavigation= {
      addListener: jest.fn(),
      navigate: jest.fn()
    };
    store.dispatch = jest.fn();
    const tempWrapper = render(
      <Provider store={store}>
        <Component navigation={mockNavigation}/>
      </Provider>
    )
    ({ getByText } = tempWrapper);
    expect(getByText('Already There')).toBeDefined();
  });
})

初始 redux 状态的结构是一个具有以下结构的对象：

{
  ....,
  data:{
    id:'',
    details:{
      category:'',
      ......
    }
  },
  ....,
}

... --> 表示与该组件无关的附加数据

通常状态会在这个组件获取数据之前更新，所以为了模拟它，我在模拟它之前将更新的值存储在 redux 存储中。现在我面临的问题是，在测试时，我将 details 的值作为一个空对象而不是我在渲染它进行测试之前设置的对象。在正常使用中，组件工作正常并且商店正在正确更新，但是在测试时我从商店接收到详细信息属性的空对象。预期值是我在测试之前尝试设置的类别设置为重复的值。

也许我错过了以这种方式使用商店测试组件之前需要采取的一些步骤。任何帮助将不胜感激。

4

0 回答 0