使用 Jest 测试状态变量

时间:2021-04-23 16:31:50

标签: reactjs testing jestjs enzyme

我正在学习使用 jest 和 Enzyme 测试 React 应用程序。我创建了一个组件并使用 redux 来维护和更新状态。组件代码如下。

现在我想编写测试来检查 prodOverviewAccordion 的初始值,我们在上下文文件中将其设置为 true。

我试过写,但收到错误。还分享了测试代码。请帮忙


const ProdOverview = () => {
  const {
    productState,
    setProdOverviewAccordion
  } = React.useContext(ProductContext);
  const {prodOverviewAccordion } = productState;
  const [completeStatusprod, setCompleteStatusprod] = useState(false);

  return (
    <div onClick={toggleTriggerProd}>
      <s-box>
        <Collapsible
          trigger={
            <Accordion
              name={ProductConfig.accordionTriggerLabels.prodOverviewLabel}
              completeStatusIcon={completeStatusprod ? 'check-circle' : 'alert-triangle'}
              completeStatus={completeStatusprod}
            />
          }
          easing='ease-out'
          handleTriggerClick={() => {
            if (!prodOverviewAccordion) {
              setProdOverviewAccordion(true);
            } else {
              setProdOverviewAccordion(false);
            }
          }}
          open={prodOverviewAccordion}
          data-test='prodOverViewCollapsible'
        >
        <p>Test</p>
        </Collapsible>
      </s-box>
    </div>
  );
};

export default ProdOverview;
const prodsetup = (props = {}) => {
  return shallow(<ProdOverview />);
};
describe('Product Overview panel Test', () => {
  const mockSetCurrentGuess = jest.fn();
  beforeEach(() => {
    mockSetCurrentGuess.mockClear();
  });

  test('should render Collapsible panel', () => {
    const wrapper = prodsetup();
    const component = findByTestAttr(wrapper, 'prodOverViewCollapsible');
    expect(component.length).toBe(1);
  });

  test('Product Overview Panel should be in open state', () => {
    const wrapper = prodsetup();
    expect(wrapper.state().prodOverviewAccordion.to.equal(true));
  });
});

0 个答案:

没有答案