随笔分类 - Unit Testing
摘要：function somethingRisky() {} try { somethingRisky() } catch(err: unknown) { if (err instanceof Error) { console.log(err.stack) } else { console.log(er
阅读全文
摘要：Folder structure: | __mocks__ | api | pet.js | src | api | pet.js __mocks__/api/pet.js // __mocks__/api/pet.js import { readFileSync } from 'fs' impor
阅读全文
摘要：It's always important to test your code, especially if you're open-sourcing it for others to use. In this video, we'll learn how to use react-hooks-te
阅读全文
摘要：When you use a React Portal, much of your component can be rendered outside the main DOM tree. Let’s see how we can use utilities provided by React Te
阅读全文
摘要：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’
阅读全文
