Apollo 反应变量 - 如何在测试期间将变量的值模拟到组件中

Question

我需要一些帮助。我是阿波罗客户端反应变量的新手。有一个组件，消息的显示取决于本地状态（apollo 缓存）中的值的变量。在测试将不同值传递到该变量的组件期间，模拟 apollo 缓存将如何？

消息.tsx

const Message: FC = ({ children }) => {
  const message = useReactiveVar(messageVar);

  return (
    <>
      {!!message && (
        <Alert>
          <Typography className={classes.title}>
            Due to scheduled data updates...
          </Typography>
        </Alert>
      )}
      {children}
    </>
  );
};

缓存.ts

export const cache: InMemoryCache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        maintenanceMessage: {
          read() {
            return messageVar();
          },
        },
      },
    },
  },
});

const maintenanceMessageVar = makeVar<null>(null)

消息.test.tsx

it('render message', () => {
const { getByText } = render(
  <MockedProvider
    mocks={mock}
    cache={cache}
    addTypename={true}
  >
    <Message>
     <h4>Header</h4>
    </Message>
  </MockedProvider>,
);

getByText('Due to scheduled data updates...');

});

Answer 1

您可以在渲染组件之前设置这些反应变量。

例如：

it('render message', () => {
  messageVar(true);
  
  const { getByText } = render(
  <MockedProvider
    mocks={mock}
    cache={cache}
    addTypename={true}
  >
    <Message>
     <h4>Header</h4>
    </Message>
  </MockedProvider>,
);