react-testing-library

问题 I'm building a React app. I use Material-UI version 3.9.3 for my components and Cypress with Cypress Testing Library for my E2E tests. I have a multiline <TextField /> for which I want to write some tests. When you give the multiline prop to TextField it renders for some reason three textarea tags. One of these has a visibility of hidden, but still contains a value. There is also a visible one containing the value, but further down in the tree. <TextField id="outlined-name" label="Name"

问题 I'm building a React app. I use Material-UI version 3.9.3 for my components and Cypress with Cypress Testing Library for my E2E tests. I have a multiline <TextField /> for which I want to write some tests. When you give the multiline prop to TextField it renders for some reason three textarea tags. One of these has a visibility of hidden, but still contains a value. There is also a visible one containing the value, but further down in the tree. <TextField id="outlined-name" label="Name"

问题 I'm working with a simple component that does a side effect. My test passes, but I'm getting the warning Warning: An update to Hello inside a test was not wrapped in act(...). . I'm also don't know if waitForElement is the best way to write this test. My component export default function Hello() { const [posts, setPosts] = useState([]); useEffect(() => { const fetchData = async () => { const response = await axios.get('https://jsonplaceholder.typicode.com/posts'); setPosts(response.data); }

问题 I am trying to mock history.push inside the new useHistory hook on react-router and using @testing-library/react . I just mocked the module like the first answer here: How to test components using new react router hooks? So I am doing: //NotFound.js import * as React from 'react'; import { useHistory } from 'react-router-dom'; const RouteNotFound = () => { const history = useHistory(); return ( <div> <button onClick={() => history.push('/help')} /> </div> ); }; export default RouteNotFound; /

问题 I am trying to mock history.push inside the new useHistory hook on react-router and using @testing-library/react . I just mocked the module like the first answer here: How to test components using new react router hooks? So I am doing: //NotFound.js import * as React from 'react'; import { useHistory } from 'react-router-dom'; const RouteNotFound = () => { const history = useHistory(); return ( <div> <button onClick={() => history.push('/help')} /> </div> ); }; export default RouteNotFound; /

问题 I am building a chat app and would like to write integration tests using react-testing-library and can not figure out how to mock socket.io-client 's socket.on , socket.emit , etc. I tried follow this article and tried using mock-socket.io and socket.io-mock all with no luck. This is the component I am trying to test: import React, { useEffect, useState } from 'react'; import io from 'socket.io-client'; import 'dotenv/config'; import ChatInput from './ChatInput'; import Messages from '.

问题 I am building a chat app and would like to write integration tests using react-testing-library and can not figure out how to mock socket.io-client 's socket.on , socket.emit , etc. I tried follow this article and tried using mock-socket.io and socket.io-mock all with no luck. This is the component I am trying to test: import React, { useEffect, useState } from 'react'; import io from 'socket.io-client'; import 'dotenv/config'; import ChatInput from './ChatInput'; import Messages from '.

问题 I have a component that fetches data asynchronously in componentDidMount() componentDidMount() { const self = this; const url = "/some/path"; const data = {} const config = { headers: { "Content-Type": "application/json", "Accept": "application/json" } }; axios.get(url, data, config) .then(function(response) { // Do success stuff self.setState({ .... }); }) .catch(function(error) { // Do failure stuff self.setState({ .... }); }) ; } My test for the component looks like this - it("renders the

问题 I'm trying to mock axios.create() because I'm using its instance across the app and obviously need all of its implementation which is destroyed by the mock, thus cannot get the result of the get, post method properly. This is how the code looks like in the actual file: export const axiosInstance = axios.create({ headers: { ...headers }, transformRequest: [ function (data, headers) { return data; }, ], }); const response = await axiosInstance.get(endpoint); And here is the mock setup for axios

问题 I'm trying to mock axios.create() because I'm using its instance across the app and obviously need all of its implementation which is destroyed by the mock, thus cannot get the result of the get, post method properly. This is how the code looks like in the actual file: export const axiosInstance = axios.create({ headers: { ...headers }, transformRequest: [ function (data, headers) { return data; }, ], }); const response = await axiosInstance.get(endpoint); And here is the mock setup for axios