小编onu*_*tan的帖子

我正在使用 create-react-app、Jest 和 react-testing-library 来配置聊天机器人项目。

我有一个使用 useRef 钩子的功能组件。当一条新消息到来时，会触发 useEffect 钩子并通过查看 ref 的当前属性引起滚动事件。

const ChatBot = () => {
  const chatBotMessagesRef = useRef(null)
  const chatBotContext = useContext(ChatBotContext)
  const { chat, typing } = chatBotContext

  useEffect(() => {
    if (typeof chatMessagesRef.current.scrollTo !== 'undefined' && chat && chat.length > 0) { 
       chatBotMessagesRef.current.scrollTo({
         top: chatMessagesRef.current.scrollHeight,
         behavior: 'smooth'
       })
    }
    // eslint-disable-next-line
  }, [chat, typing])

   return (
    <>
      <ChatBotHeader />
      <div className='chatbot' ref={chatBotMessagesRef}>
        {chat && chat.map((message, index) => {
          return <ChatBotBoard answers={message.answers} key={index} currentIndex={index + …

在我们的项目中，我们react-intl用于国际化。我们正在使用jest作为测试框架，我们决定将我们的单元测试实用程序库从酶移到react-testing-library. 不过现在，既然没有浅渲染，就得<IntlProvider ... />自己在测试中提供，没问题。但即使我这样做，当测试终端说Invalid hook call. Hooks can only be called inside of the body of a function component但当我在本地运行项目时，没有错误只是按预期正常运行。PS 在测试中，Apollo provider 工作正常。

FirstNameFor.test.tsx

import { IntlProvider } from 'react-intl';
import { createMockClient } from 'mock-apollo-client';
import { ApolloProvider as ApolloProviderHooks } from '@apollo/react-hooks';
import { ApolloProvider } from 'react-apollo';

const wrapper = (mockProps, mockClient) => {
  return (
    <ApolloProvider client={mockClient}>
      <ApolloProviderHooks client={mockClient}>
        <IntlProvider locale="en">
          <FirstNameForm
            handleNext={mockProps.handleNext}
            onboardingState={mockProps.onboardingState}
            setHelpContent={mockProps.setHelpContent}
            updateOnboardingState={mockProps.updateOnboardingState}
          /> …

我正在使用 solana json rpc api 从我的 javascript 应用程序检查钱包的代币余额。我已经像这样使用了该功能

const getTokenBalance = async (walletAddress, tokenMintAddress) => {
  const response = await axios({
    url: `https://api.mainnet-beta.solana.com`,
    method: "post",
    headers: { "Content-Type": "application/json" },
    data: {
      jsonrpc: "2.0",
      id: 1,
      method: "getTokenAccountsByOwner",
      params: [
        walletAddress,
        {
          mint: tokenMintAddress,
        },
        {
          encoding: "jsonParsed",
        },
      ],
    },
  });
  if (
    Array.isArray(response?.data?.result?.value) &&
    response?.data?.result?.value?.length > 0 &&
    response?.data?.result?.value[0]?.account?.data?.parsed?.info?.tokenAmount
      ?.amount > 0
  ) {
    return (
      Number(
        response?.data?.result?.value[0]?.account?.data?.parsed?.info
          ?.tokenAmount?.amount
      ) / 1000000000
    );
  } else {
    return 0; …

我正在使用 create-react-app、Jest 和 react-testing-library 来配置聊天机器人项目。

例如，我有一个连接到 WebSocket 服务器的 React 功能组件，并且 DOM 会根据 WebSocket 消息进行更改

const LiveChat = () => {
  const [socket, setSocket] = useState(null)

   useEffect(() => {
    setSocket(new WebSocket('ws://localhost:1234'))
   }, [])

  useEffect(() => {
    socket && socket.onmessage = message => { handleAgentMessages(message.data) }
  }, [socket])

  const handleAgentMessages = message => {
     const { messageContent, messageType, secureKey } = JSON.parse(message)
     if (messageType === TEXT && messageContent) {
       alert(messageContent)
       playChatMessageSound()
     }
       ...
   }

   return (
      <div className='live-chat' data-testid='live-chat'>
          ...
      </div>
   ) …

我有一个聊天机器人应用程序，我想用 Cypress 对其进行测试。我正在查看机器人是否正确响应客户端的案例。所以我点击后检查我应该得到一个具有类bot-message的 div 。

cy.get('.bot-message').should('have.text','I want to send invoice to my email')

CypressError: Timed out retrying: expected
[ <div.bot-message>, 3 more... ] to have text 
I want to send invoice to my email. , but the text was 
I want to see my profile.I want to see my invoices.
I want to send invoice to my email

这里的问题是 cypress 获取名为bot-message的类中的所有 div 。

所以我想要能够做的是说得到同一个类的第 3 个 div。如果情况并非如此，那么我想我应该为每个机器人消息 div 提供数据属性