react-testing-library | 易学教程

React-Testing-Library - Wrapping Component with Redux and Router

阅读更多关于 React-Testing-Library - Wrapping Component with Redux and Router

问题 I am trying to setup an test file to render a route/page on my application. I'm trying to wrap everything with Redux and Router, and this is what I have: import React from 'react'; import { render } from 'react-testing-library'; import { createStore } from 'redux'; import { Provider } from 'react-redux'; import reducer from '../../store/reducer'; import {Link, Route, Router, Switch} from 'react-router-dom' import {createMemoryHistory} from 'history' import ViewNode from '../Pages/ViewNode';

Making the window to different data type in react testing library

阅读更多关于 Making the window to different data type in react testing library

问题 I am trying to test a reusable hook for checking the window resize has been triggered or not. I was using enzyme for my unit testing, since i was not able to find docs and support for hooks i am using @testing-library/react @testing-library/react-hooks hooks.js import { useState, useEffect } from "react"; function useWindowSize() { const isClient = typeof window === "object"; function getSize() { return { width: isClient ? window.innerWidth : undefined, height: isClient ? window.innerHeight :

How do I trigger a change event on radio buttons in react-testing-library?

阅读更多关于 How do I trigger a change event on radio buttons in react-testing-library?

问题 I'm in the process of moving over to react-testing-library, and have no idea how to trigger this event and get the results of the changes. I've tried using the fireEvent function to trigger the change, and then tried the rerender function, but I can't seem to get it to work. App.js import React, { useState } from "react"; import logo from "./logo.svg"; import "./App.css"; const options = { DoTheThing: 'DoTheThing', DoOtherThing: 'DoOtherThing', }; function App() { const [action, setAction] =

SyntaxError: Unexpected token, expected “</>”

阅读更多关于 SyntaxError: Unexpected token, expected “”

问题 Adding this question because I didn't easily find the answer online. I am trying to use react-testing-library to test that a component renders correctly. However I get numerous errors that don't seem to help much. Here is my test file ( report.test.ts , alongside the component in the code): import { render } from "react-testing-library"; import "jest-dom/extend-expect"; import Report from "./Report"; test("component", () => { const reportData = { name: "test-report-name", url: "test-url" };

Jest + react-testing-library: Warning update was not wrapped in act()

阅读更多关于 Jest + react-testing-library: Warning update was not wrapped in act()

问题 I am testing my component wit react-testing-library and test works well. I just can't get rid of this warning, fireEvent should by wrapped in act out-of-the-box, but I tried to wrap it again and it did'nt help. Here is my test case. it.only("should start file upload if file is added to the field", async () => { jest.useFakeTimers(); const { getByTestId } = wrapper; const file = new File(["filefilefile"], "videoFile.mxf"); const fileInput = getByTestId("drop-zone").querySelector( "input[type=

How to test useEffect with async function and setState inside

阅读更多关于 How to test useEffect with async function and setState inside

问题 I have set up a github project to understand how to better test react (v 16.8.0) useEffect hook. I make an api call to fetch data inside useEffect and I set the received data as state component element. My component receives the query as a prop and make the api call if the query prop string is not empty. I would like to test that with a no-empty query prop the api call is made and the component set its state right. I know that the problem to be faced testing useEffect is that the effects

React testing library: Test attribute / prop

阅读更多关于 React testing library: Test attribute / prop

I'm writing a React app using TypeScript. I use material-ui for my components and react-testing-library for my unit tests. I'm writing a wrapper for material-ui's Grid component so that I always have an item. import Grid from "@material-ui/core/Grid"; import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles"; import React, { PureComponent } from "react"; import styles from "./styles"; export interface OwnProps { className?: string; } export interface Props extends WithStyles<typeof styles>, OwnProps {} export interface DefaultProps { className: string; } export class

Jest mock react context

阅读更多关于 Jest mock react context

I need some help understanding how one can test an application using React Context . Here's my sample setup. context.js import React from 'react' export const AppContext = React.createContext() App.js import React from 'react' import MyComponent from './MyComponent' import {AppContext} from './context' const App extends React.Component { state = { items: [] } handleItemAdd = newItem => { const {items} = this.state items.push(newItem) this.setState(items) } render() { return ( <AppContext.Provider value={{ addItem: this.handleItemAdd }}> <MyComponent /> </AppContext.Provider> ) } } export

Difference between enzyme, ReactTestUtils and react-testing-library

阅读更多关于 Difference between enzyme, ReactTestUtils and react-testing-library

问题 What is the difference between enzyme, ReactTestUtils and react-testing-library for react testing? The ReactTestUtils documentation says: ReactTestUtils makes it easy to test React components in the testing framework of your choice. The enzyme documentation just says: Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output. React-testing-library documentation: The react-testing-library is a very light-weight

How to test a className with Jest and React testing library

阅读更多关于 How to test a className with Jest and React testing library

I am totally new to JavaScript testing and working in a new codebase. I would like to write a test that is checking for a className on the element. I am working with Jest and react-testing-library. Below I have a test that will render a button based on the variant prop. It also contains a className and .I would like to test that. it('Renders with a className equal to the variant', () => { const { container } = render(<Button variant="default" />) expect(container.firstChild) // Check for className here }) I tried to google for a property like Enzyme has with hasClass but couldn't find anything