随笔分类 - React
摘要：You can get a huge amount of confidence and coverage from integration tests that test an entire page, or even your entire app. Let’s write a test that
阅读全文
摘要：Sometimes your react component may need to do some cleanup work in the return value from useEffect or useLayoutEffect, or the componentWillUnmount lif
阅读全文
摘要：That setup function is pretty handy. Seems like a good opportunity for an abstraction. Well, we already have one! It’s called React Hooks Testing Libr
阅读全文
摘要：It’s very common for our components to use state from the redux store (or to be refactored to use it eventually). Having to change our tests every tim
阅读全文
摘要：We’ve got a custom useCounter hook here and we want to make sure the increment and decrement functions it returns will update the count state that it
阅读全文
摘要：Mocking the <Redirect /> component in react-router works, but it’s imperfect because we don’t know for sure that the user will be redirected properly.
阅读全文
摘要：We have the happy path covered for our post editor component, but what happens if there’s an error in saving the user’s information? We should probabl
阅读全文
摘要：A really important aspect of TDD is the refactor phase. A critical piece to making your tests easier to maintain is using code structure and values to
阅读全文
摘要：Just make sure the date is in a range then it is fine import React from 'react' import {render, fireEvent, waitFor} from '@testing-library/react' impo
阅读全文
摘要：Once the data has been saved on the server, we’ll want to redirect the user to the home screen with react-router’s <Redirect /> component. Let’s go ah
阅读全文
摘要：We have a bit of repetition in our rerender calls here and it would be nice if we could avoid that. Let’s use the wrapper option for React Testing Lib
阅读全文
摘要：Our error boundary has some other use cases that it supports and we should try to make sure our tests cover all those use cases, so let’s add a test t
阅读全文
摘要：When testing an error boundary, your console will be filled with console.error calls from React. Those can be a real distraction from the rest of the
阅读全文
摘要：Error boundary: import React from 'react' import { reportError } from './components/extra/api' export default class ErrorBoundary extends React.Compon
阅读全文
摘要：There are some situations where you want to focus your tests on a particular component and not any of its children. There are other situations where y
阅读全文
摘要：If you have a component that makes HTTP requests, you’ll probably want to mock those out for UI unit and integration tests. Let’s see how to use jest’
阅读全文
摘要：You can use 'rerender' for a component when its props changed. Then if you wnat to check the alert message has gone when we rerender, you need to use
阅读全文
摘要：The User Event module is part of the Testing Library family of tools and lets you fire events on DOM nodes that more closely resemble the way your use
阅读全文
摘要：The fireEvent utility in React Testing Library supports all the events that you regularly use in the web (change, click, etc.). Let’s see how we can t
阅读全文
摘要：While you’re writing your tests it can be helpful to see what the DOM looks like. You can do this with React Testing Library’s debug function which wi
阅读全文
浙公网安备 33010602011771号