新手也能看懂的前端单元测试框架:Vitest

 

单元测试的概念及作用

1.什么是单元测试?

单元测试是测试中的一个重要环节,它针对软件中的最小可测试单元进行验证,通常是指对代码中的单个函数、方法或模块进行测试。

单元测试旨在确定特定部分代码的行为是否符合预期,通过针对单元代码的各种输入情况进行测试,来验证代码的正确性、稳定性和可靠性。

2.为什么要做单元测试?

  • 2.1 确保代码质量和可靠性:单元测试可以帮助开发人员发现和修复代码中的错误和缺陷。通过编写针对每个单独的函数或组件的测试用例,可以验证其行为是否符合预期,从而增强代码质量和可靠性。

  • 2.2 提高代码可维护性: 单元测试可以作为文档和说明来帮助其他开发人员了解代码的预期行为。通过编写清晰、有目的性的测试用例,可以帮助开发团队更好地理解和维护代码。

  • 2.3 快速反馈和迭代: 单元测试使得代码的迭代和快速反馈变得更加容易。通过自动运行测试用例,开发人员在修改代码后可以快速获得有关是否引入新错误或破坏现有功能的反馈。

  • 2.4 节省时间和资源: 尽管编写和维护单元测试需要一些额外的工作量,但它可以节省大量的时间和资源。通过快速检测和修复代码中的错误,可以避免在后期发现问题并进行繁琐的调试和修复。

    此外,当代码库变得越来越大和复杂时,拥有一套稳健的单元测试可以节省大量的回归测试时间。

3.前端代码单元测试面临的挑战与问题

  • 3.1 难以测试 DOM 操作: 前端开发中最常见的任务之一就是操作 DOM,但由于浏览器环境的限制,DOM 操作很难通过自动化测试来模拟。这意味着要测试 DOM 操作通常需要手动测试或使用可视化测试工具。

  • 3.2 异步操作的测试: 在前端开发中,异步代码执行是比较常见的。但是,异步测试需要在数据返回之前等待一段时间。

  • 3.3 测试用例覆盖率的管理: 在编写测试用例时,需要考虑完整和准确地覆盖所有代码路径。但是,测试用例的数量和管理可以是一个挑战,并且可能需要一些额外的工具来帮助管理测试用例的覆盖率。

  • 3.4 特定 DOM 事件和浏览器环境的测试: 在某些情况下,需要通过特定的 DOM 事件和浏览器环境对代码进行测试。这可以通过模拟特定的事件和使用虚拟浏览器环境来完成。

前端单元测试工具以及测试规范

1.测试工具

以下是一些流行的前端单元测试工具:

  • 1.1 Jest:Jest 是一个 Facebook 公司开发的流行的 JavaScript 测试框架。它提供了自动化测试、模拟和覆盖率报告等功能。Jest 的主要特点是易于使用速度快自动运行测试用例和提供详细报告。

  • 1.2 Mocha:Mocha 是一个流行的 JavaScript 测试框架,可以用于编写前端和后端测试用例。它提供不同的测试运行器、测试框架、覆盖率报告等工具。Mocha 可以与其他库(如 ChaiSinon 等)结合使用,以提供更好的测试功能。

  • 1.3 Enzyme:Enzyme 是一个 React 组件测试工具,它提供了一个简单的 API 来模拟 React 组件的行为。Enzyme 可以帮助开发人员测试组件的渲染和逻辑,以确保其正确性。它还提供了丰富的匹配器和渲染引擎,以进行功能和性能测试。

实际项目中测试框架和工具选择:

  • 测试基础框架:Vitest ,它是基于vite驱动,如果项目中使用了vite,它是最好的选择

  • DOM 环境jsdomhappy-dom

React项目:

  • @testing-library/react:作为 React DOM 和 UI 组件

  • @testing-library/jest-dom用于扩展Vitestexpect方法

Vue项目

  • vue-router-mock:模拟 Vue 3应用程序中的路由交互

  • @vitejs/plugin-vue 是一个 Vite 插件,它可以让 Vite 可以解析 .vue 文件,对于 JSX/TSX 支持,还需要@vitejs/plugin-vue-jsx

  • @vue/test-utils:Vue 3的组件测试工具

2.测试规范

(1) 命名约定it or test?

  • 1、it是 BDD(行为驱动开发)风格中常用的命名约定。它强调描述被测试行为的自然语言描述,以便更好地阐述测试的用例。

  • 2、test是传统的命名约定,被广泛使用在各种单元测试框架中。它更加直接和简洁,通常以测试的目标作为开头,然后描述被测试的函数或特性。

无论使用it还是test作为测试函数的命名约定,最重要的是保持一致性和可读性。根据你的团队或项目的偏好,选择一个适合的命名约定并始终如一地使用它。

(2) 判断相等toBe or toEqual?

  • 1、toBe它使用===检查严格的平等,通常用于比较基础类型。

  • 2、toEqual用于检查两个对象具有相同的值。这个匹配器递归地检查所有字段的相等性,而不是检查对象身份 - 这也被称为“深度平等”。

使用toBe进行比较时要注意,它比较的是两个对象的引用,而不是对象的属性是否相同。

(3) 测试文件写在哪?

  • 1、把测试文件统一写在 src/test/,这样保持项目和测试代码分离,保持工程目录整洁。

  • 2、和组件写在同一级目录,即src/components/下,xx.jsxxx.test.jsx, 这样对开发人员友好,组件与测试一起更方便维护。

(4) 测试用例注意事项

  • 1、清晰的目的和描述:测试用例应该具有清晰的目的和描述,以便于理解和维护。用一个简洁但有意义的名称来描述该测试用例的功能或行为。

  • 2、单一功能和场景:每个测试用例应该只关注一个功能或一个特定的场景。这有助于准确地定位和修复问题。

  • 3、确保环境一致性:对于每个测试用例,提供必要的前提条件,确保测试环境的一致性。

  • 4、测试目标简单、完整:尽量把业务代码的函数的功能单一化,简单化。如果一个函数的功能包含了十几个功能数十个功能,那应该对该函数进行拆分,从而更加有利于测试的进行。

使用Vitest测试React项目

1.安装相关工具

pnpm i -D vitest js-dom @testing-library/react

Vitest 1.0 需要 Vite >=v5.0.0 和 Node >=v18.0

2.配置vitest

Vitest 的主要优势之一是它与 Vite 的统一配置。如果存在,vitest 将读取你的根目录 vite.config.ts 以匹配插件并设置为你的 Vite 应用程序。

如果你已经在使用 Vite,请在 Vite配置中添加 test 属性。你还需要使用 三斜杠指令 在你的配置文件的顶部引用。

vite.config.ts

 
  1. /// <reference types="vitest" />

  2. import { defineConfig } from 'vite'

  3. export default defineConfig({

  4. test: {

  5. globals: true,

  6. environment: 'jsdom',

  7. },

  8. })

  • globals: 默认情况下,vitest 不显式提供全局 API。如果你更倾向于使用类似 jest 中的全局 API,可以将 --globals 选项传递给 CLI 或在配置中添加 globals: true

  • environment: Vitest中的默认测试环境是一个 Node.js 环境。如果你正在构建 Web 端应用程序,你可以使用 jsdom 或 happy-dom 这种类似浏览器(browser-like)的环境来替代 Node.js

可以参阅 配置索引(https://cn.vitest.dev/config/) 中的配置选项列表

3.方法测试

测试独立的工具函数,例如测试斐波那契数列:

@param方法接受参数 num

@return返回值为斐波那契数列中第 n 个数字fibonacci.ts

 
  1. export function fibonacci(num: number): number {

  2. if (num <= 1) {

  3. return num;

  4. }

  5. return fibonacci(num - 1) + fibonacci(num - 2);

  6. }

fibonacci.test.ts

 
  1. import { describe, it, expect } from 'vitest';

  2. import { fibonacci } from '@/utils/fibonacci/fibonacci.ts';

  3. describe('fibonacci', () => {

  4. it('should return 0 when num is 0', () => {

  5. expect(fibonacci(0)).toEqual(0);

  6. });

  7. it('should return 1 when num is 1', () => {

  8. expect(fibonacci(1)).toEqual(1);

  9. });

  10. it('should return 1 when num is 2', () => {

  11. expect(fibonacci(2)).toEqual(1);

  12. });

  13. it('should return 2 when num is 3', () => {

  14. expect(fibonacci(3)).toEqual(2);

  15. });

  16. it('should return 3 when num is 4', () => {

  17. expect(fibonacci(4)).toEqual(3);

  18. });

  19. });

当编写测试用例来测试独立的方法或函数时,应满足以下要求👇:

  • 1、边界条件测试:测试应该覆盖方法或函数的所有边界条件。这包括输入的最小值、最大值、边界情况和异常情况。

  • 2、异常处理测试:测试应该包括错误情况和异常处理,以确保方法或函数能够正确地处理这些情况,而不会导致系统崩溃或出现错误。

4.快照测试

快照测试是一种用于比较当前渲染结果与预期快照的自动化测试技术。

适用场景:测试一个纯渲染的组件,UI渲染一次后不再发生改变。这种场景下就不需要再耗费精力去单测,而是采用低成本的快照测试。

Result.tsx

 
  1. import type { FC } from 'react';

  2. type Student = {

  3. id?: number;

  4. name?: string;

  5. };

  6. interface PropsType {

  7. stus: Student[];

  8. }

  9. const Results: FC<PropsType> = ({ stus }) => {

  10. return (

  11. <div className="search">

  12. {!stus.length ? (

  13. <h1>No Data</h1>

  14. ) : (

  15. stus.map((stu: Student) => {

  16. return (

  17. <div key={stu.id}>

  18. <div className="info">

  19. <h1>{stu.name}</h1>

  20. </div>

  21. </div>

  22. );

  23. })

  24. )}

  25. </div>

  26. );

  27. };

  28. export default Results;

Results.test.tsx​​​​​​​

 
  1. import { render } from '@testing-library/react';

  2. import { describe, expect, it } from 'vitest';

  3. import Results from './Results.tsx';

  4. describe('Results', () => {

  5. // 快照测试,会在当前目录下生成__snapshots__文件夹和快照文件

  6. it('should renders correctly with no stus', () => {

  7. const { asFragment } = render(<Results stus={[]} />);

  8. // 渲染快照结果是否与存档快照一致

  9. expect(asFragment()).toMatchSnapshot();

  10. });

  11. it('should renders correctly with some stus', () => {

  12. const stus = [

  13. {

  14. id: 1,

  15. name: 'Luna'

  16. },

  17. ];

  18. const { asFragment } = render(<Results stus={stus} />);

  19. // 渲染快照结果是否与存档快照一致

  20. expect(asFragment()).toMatchSnapshot();

  21. });

  22. });

在第一次执行完测试用例后,当前目录会生成以下文件:【图片】

后续的每次测试会将最新结果和这里保存的结果进行对比,如果一致,则代表测试通过,反之,则不然。

5.组件测试

日常开发中,我们接触最多的就是组件,越来越多的框架推荐页面组件化,组件也必然是单元测试的目标对象之一。

首先应该知道对于组件,应该测试哪些内容:

  • Component Data:组件静态数据

  • Component Props:组件动态数据

  • User Interaction:用户交互,例如单击

  • LifeCycle Methods:生命周期逻辑

  • Store:组件状态值

  • Route Params:路由参数

  • 输出的DOM

  • 外部调用的函数Hook

  • 对子组件的改变

5.1组件DOM测试

组件根据不同的props输入,组件会呈现不同的DOM结构,我们可以通过@testing-library/react 库提供的render API,结合jsdom(在Node环境中提供对 web 标准的模拟实现)来完成DOM测试。

Pet.tsx​​​​​​​

 
  1. import type { FC } from 'react';

  2. interface PropsType {

  3. id?: number;

  4. name?: string;

  5. animal?: string;

  6. breed?: string;

  7. images?: string[];

  8. location?: string;

  9. }

  10. const Pet: FC<PropsType> = (props) => {

  11. const { name, animal, breed, images, location, id } = props;

  12. let hero = 'http://pets-images.dev-apis.com/pets/0.jpg';

  13. if (images?.length) {

  14. hero = images[0];

  15. }

  16. return (

  17. <div className="pet">

  18. <div className="image-container">

  19. <img data-testid="thumbnail" src={hero} alt={name} />

  20. </div>

  21. <div className="info">

  22. <h1>{name}</h1>

  23. <h2>{`${animal} — ${breed} — ${location}`}</h2>

  24. </div>

  25. </Link>

  26. );

  27. };

  28. export default Pet;

Pet.test.tsx​​​​​​​

  1. import { render } from '@testing-library/react';

  2. import { StaticRouter } from 'react-router-dom/server';

  3. import { expect, test } from 'vitest';

  4. import Pet from './Pet.tsx';

  5. test('displays a default thumbnail', async () => {

  6. // 渲染组件

  7. const pet = render(<Pet />);

  8. // 异步等待获取指定的DOM元素

  9. const petThumbnail = (await pet.findByTestId(

  10. 'thumbnail'

  11. )) as HTMLImageElement;

  12. // 断言0.jpg包含在src的属性值中

  13. expect(petThumbnail.src).toContain('0.jpg');

  14. // 卸载组件

  15. pet.unmount();

  16. });

有很多API可以断言一个元素是否存在,例如toBeInTheDocument,详细用法请查阅官方文档。

expect(testDom).toBeInTheDocument();

5.2交互测试

上面测试了组件能够按预期渲染,单一个这样的用例是远远不够的,我们还需要模拟用户交互行为,来测试组件是否符合预期,例如常见的点击、拖拽等。

Carousel.tsx​​​​​​​

  1. import type { FC, MouseEvent } from 'react';

  2. import { useState } from 'react';

  3. interface PropsType {

  4. images?: string[];

  5. }

  6. const Carousel: FC<PropsType> = (props) => {

  7. const { images = ['http://pets-images.dev-apis.com/pets/0.jpg'] } = props;

  8. const [active, setActive] = useState<number>(0);

  9. const handleIndexClick = (event: MouseEvent) => {

  10. const { index = 0 } = (event.target as HTMLImageElement).dataset;

  11. setActive(+index);

  12. };

  13. return (

  14. <div className="carousel">

  15. <img data-testid="hero" src={images[active]} alt="animal" />

  16. <div className="carousel-smaller">

  17. {images.map((photo, index) => (

  18. <img

  19. key={photo}

  20. src={photo}

  21. className={index === active ? 'active' : ''}

  22. alt="animal thumbnail"

  23. onClick={(e) => handleIndexClick(e)}

  24. data-index={index}

  25. data-testid={`thumbnail${index}`}

  26. />

  27. ))}

  28. </div>

  29. </div>

  30. );

  31. };

  32. export default Carousel;

Carousel.test.tsx​​​​​​​

  1. import { act, fireEvent, render } from '@testing-library/react';

  2. import { expect, test } from 'vitest';

  3. import Carousel from './Carousel.tsx';

  4. test('lets users click on thumbnails to make them the hero', async () => {

  5. const images = ['0.jpg', '1.jpg', '2.jpg', '3.jpg'];

  6. const carousel = render(<Carousel images={images} />);

  7. const hero = (await carousel.findByTestId('hero')) as HTMLImageElement;

  8. expect(hero.src).toContain(images[0]);

  9. for (let i = 0; i < images.length; i++) {

  10. const image = images[i];

  11. const thumb = await carousel.findByTestId(`thumbnail${i}`);

  12. act(() => {

  13. // 模拟 click 用户事件

  14. fireEvent.click(thumb);

  15. });

  16. expect(hero.src).toContain(image);

  17. expect(Array.from(thumb.classList)).toContain('active');

  18. }

  19. });

6.React Hook 测试

这里的Hook是指业务中自定义封装的Hook,我们知道Hook只能在函数组件中调用,那如何来做单元测试呢?RTL中提供了renderHook ,专门用来调用 Hook

useSearch.ts​​​​​​​

 
  1. import { useState, useMemo } from 'react';

  2. /**

  3. * useSearch 数据过滤

  4. * @param items 初始数组

  5. * @return

  6. * searchTerm 搜索词

  7. * setSearchTerm 更新搜索词方法

  8. * filteredItems 过滤后的数据

  9. */

  10. export const useSearch = (items: any[]) => {

  11. const [searchTerm, setSearchTerm] = useState('');

  12. const filteredItems = useMemo(() => {

  13. return items.filter((movie) =>

  14. movie.title.toLowerCase().includes(searchTerm.toLowerCase())

  15. );

  16. }, [items, searchTerm]);

  17. return {

  18. searchTerm,

  19. setSearchTerm,

  20. filteredItems,

  21. };

  22. };

useSearch.test.ts​​​​​​​

  1. import { act, renderHook } from '@testing-library/react';

  2. import { describe, expect, it } from 'vitest';

  3. import { useSearch } from '@/hooks/__test__/useSearch.ts';

  4. describe('useSearch hook', () => {

  5. // 测试返回默认搜索项 和 原始项目列表

  6. it('should return a default search term and original items', () => {

  7. const items = [{ title: 'Star Wars' }];

  8. // renderHook 模拟hook执行环境

  9. const { result } = renderHook(() => useSearch(items));

  10. // result.current 为useSearch hook的返回值

  11. expect(result.current.searchTerm).toBe('');

  12. expect(result.current.filteredItems).toEqual(items);

  13. });

  14. // 测试设置查询条件是否生效

  15. it('should return a filtered list of items', () => {

  16. const items = [{ title: 'Star Wars' }, { title: 'Starship Troopers' }];

  17. const { result } = renderHook(() => useSearch(items));

  18. // 反应,所有的渲染和触发的事件都包装在 act 中。它负责在调用之后刷新所有效果并重新渲染。

  19. act(() => {

  20. result.current.setSearchTerm('Wars');

  21. });

  22. expect(result.current.searchTerm).toBe('Wars');

  23. expect(result.current.filteredItems.length).toBe(1);

  24. expect(result.current.filteredItems).toEqual([{ title: 'Star Wars' }]);

  25. });

  26. });

7.异步、Mock测试​​​​​​​

7.1使用waitFor,异步等待接口返回

前端很多数据都是通过接口返回,页面需要等待接口返回后才能渲染,因此单元测试中的断言也需要等待,使用waitFor可以实现。

useMovies.ts​​​​​​​

  1. export const useMovies = ():{ movies: Movie[], isLoading: boolean, error: any } => {

  2. const [movies, setMovies] = useState([]);

  3. const fetchMovies = async () => {

  4. try {

  5. setIsLoading(true);

  6. const response = await fetch("https://swapi.dev/api/films");

  7. if (!response.ok) {

  8. throw new Error("Failed to fetch movies");

  9. }

  10. const data = await response.json();

  11. setMovies(data.results);

  12. } catch (err) {

  13. //do something

  14. } finally {

  15. //do something

  16. }

  17. };

  18. useEffect(() => {

  19. fetchMovies();

  20. }, []);

  21. return { movies }

  22. }

useMovies.test.ts​​​​​​​

  1. import { renderHook, waitFor } from '@testing-library/react';

  2. import { describe, expect, it } from 'vitest';

  3. import { useMovies } from '@/hooks/__test__/useMovies.ts';

  4. describe('useMovies hook', () => {

  5. //...

  6. it('should setTimeout movies', async () => {

  7. const { result } = renderHook(() => useMovies());

  8. // 在达到超时值之前,waitFor 可能会多次运行回调。请注意,调用的数量受到超时和间隔选项的限制

  9. await waitFor(() => {

  10. expect(result.current.isLoading).toBe(true);

  11. expect(result.current.movies).toEqual([{ title: 'Star Wars' }]);

  12. expect(result.current.error).toBe(null);

  13. });

  14. });

  15. });

waitFor的第二个参数是一个配置对象,可以配置超时时间,超过配置的上限后,测试为不通过.​​​​​​​

  1. // 默认间隔为50毫秒,超时时间是1000ms。第二个参数可以配置间隔和超时时间

  2. await waitFor(

  3. () => {

  4. // ...

  5. },

  6. {

  7. timeout: 1000,

  8. }

  9. );

7.2使用spyOn拦截请求方法,自定义mock

第一种方法是真实向后端发送了请求,在实际运用中可能不太合适。我们可以选择spyOn来拦截fetch,自己mock接口返回值,更加符合测试场景。​​​​​​​

  1. import { renderHook, waitFor } from '@testing-library/react';

  2. import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';

  3. import { useMovies } from '@/hooks/__test__/useMovies.ts';

  4. describe('useMovies hook', () => {

  5. // 通过vi.spyOn方法,我们可以在不触发真正的 API 调用的情况下运行测试,从而减少由于外部因素导致测试失败的机会。

  6. // 监视该global.fetch方法并模拟其实现以返回虚假响应

  7. const fetchSpy = vi.spyOn(global, 'fetch');

  8. // 注册一个回调函数,在开始运行当前上下文中的所有测试之前调用一次

  9. beforeAll(() => {

  10. const mockResolveValue = {

  11. ok: true,

  12. data: [{ title: 'Star Wars' }],

  13. };

  14. // 接受一个值,该值将在调用 mock 函数时返回

  15. fetchSpy.mockReturnValue(mockResolveValue as any);

  16. });

  17. // 测试 fetch异步获取数据

  18. it('should fetch movies', async () => {

  19. const { result } = renderHook(() => useMovies());

  20. await waitFor(() => {

  21. expect(result.current.isLoading).toBe(true);

  22. expect(result.current.movies).toEqual([{ title: 'Star Wars' }]);

  23. expect(result.current.error).toBe(null);

  24. });

  25. });

  26. // 注册一个回调函数,以便在当前上下文中所有测试运行完毕后调用一次。

  27. afterAll(() => {

  28. // 将内部实现还原为原始函数

  29. // 还可以在 beforeEach 或 afterEach 中使用 mockClear()in方法来确保我们的测试完全隔离

  30. fetchSpy.mockRestore();

  31. });

  32. });

通过调用vi.spyOn(global, 'fetch'),拿到代理方法,再调用mockReturnValue设置mock值,以此来模拟接口返回,这样更方便去断言。

由于我们模拟了fetch方法的返回值,因此需要在测试完成后使用mockRestore恢复其原始实现,还可以使用该mockClear()方法清除所有mock的信息

7.3测试生命周期

  • beforeAll:在当前文件的正式开始测试前执行一次,适合做一些每次 test 前都要做的初始化操作,比如数据库的清空以及初始化

  • beforeEach:在当前文件的每个 test 执行前都调用一次。

  • afterAll:在当前文件所有测试结束后执行一次,适合做一些收尾工作,比如将mock清除。

  • afterEach:在当前文件的每个 test 执行完后都调用一次。

结尾

这篇文章从单元测试的重要性测试工具测试实践三个方面,带大家入门前端单元测试。

相信大家认真学完后都能有收获!

 

总结:

感谢每一个认真阅读我文章的人!!!

作为一位过来人也是希望大家少走一些弯路,如果你不想再体验一次学习时找不到资料,没人解答问题,坚持几天便放弃的感受的话,在这里我给大家分享一些自动化测试的学习资源,希望能给你前进的路上带来帮助。

软件测试面试文档

我们学习必然是为了找到高薪的工作,下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料,并且有字节大佬给出了权威的解答,刷完这一套面试资料相信大家都能找到满意的工作。

 

          视频文档获取方式:
这份文档和视频资料,对于想从事【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴我走过了最艰难的路程,希望也能帮助到你!以上均可以分享,点下方小卡片即可自行领取。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/629069.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LearnOpenGL(十八)之面剔除

一、面剔除 对于一个3D立方体&#xff0c;无论我们从哪个方向&#xff0c;最多只能同时看到3个面。如果我们能够以某种方式丢弃另外几个看不见的面&#xff0c;我们就能省下超过50%的片段着色器执行数&#xff01; 这正是面剔除(Face Culling)所做的。OpenGL能够检查所有面向…

在Linux系统上使用nmcli命令配置各种网络(有线、无线、vlan、vxlan、路由、网桥等)

前言&#xff1a;原文在我的博客网站中&#xff0c;持续更新数通、系统方面的知识&#xff0c;欢迎来访&#xff01; 在Linux系统上使用nmcli命令配置各种网络&#xff08;有线、无线、vlan、vxlan等&#xff09;https://myweb.myskillstree.cn/123.html 更新于2024/5/13&…

定时发圈操作介绍

1、登陆已有的账号&#xff0c;点击到"朋友圈"功能 2、选择要发圈的微信号&#xff0c;编辑发圈的文案内容 3、自定义想要的时间点 4、点击"立即发送" 5、可进行跟圈

AquaCrop模型运行及结果分析、代码解析;气象、土壤、作物和管理措施等数据的准备和输入;农业水资源管理

目录 专题一 模型原理与数据要求 专题二 模型数据准备 专题三 模型运行及结果分析 专题四 参数分析 专题五 源代码分析 更多应用 AquaCrop是由世界粮食及农业组织&#xff08;FAO&#xff09;开发的一个先进模型&#xff0c;旨在研究和优化农作物的水分生产效率。这个模型…

Invalid bound statement (not found) 六种解决方法

前五种参考博文&#xff1a; Invalid bound statement (not found) 五种解决方法-CSDN博客 第六种&#xff1a; 在启动类上加上MapperScan&#xff0c;指定扫描包

【刷题篇】二分查找(二)

文章目录 1、山脉数组的峰顶索引2、寻找峰值3、寻找旋转排序数组中的最小值4、LCR 点名 1、山脉数组的峰顶索引 符合下列属性的数组 arr 称为 山脉数组 &#xff1a; arr.length > 3 存在 i&#xff08;0 < i < arr.length - 1&#xff09;使得&#xff1a; arr[0] &l…

线性模型快速入门

使用matplotlib画一条直线 import numpy as np import matplotlib.pyplot as pltx np.linspace(-5, 5, 100) y 0.5*x 3plt.plot(x, y, c"orange") plt.title("Straight Line") plt.show()线性模型的直线表示 import numpy as np import matplotlib.py…

我与C++的爱恋:string类的常见接口函数

​ ​ &#x1f525;个人主页&#xff1a;guoguoqiang. &#x1f525;专栏&#xff1a;我与C的爱恋 朋友们大家好啊&#xff0c;本节我们来到STL内容的第一部分&#xff1a;string类接口函数的介绍 ​ ​ 1.string类的认识 给大家分享一个c文档 https://legacy.cplusplus.…

详细教程!VMware Workstation Pro16 安装 + 创建 win7 虚拟机!

嚯嚯嚯&#xff0c;很多宝子都想拥有自己不同的操作系统环境&#xff0c;用于学习或项目搭建。买服务器费钱&#xff0c;虚拟机则成为了一个很好的选择。本文详细介绍VMware Workstation Pro 16安装及win7虚拟机创建&#xff0c;保姆级教程奉上&#xff01; 一、准备工作 VMw…

【Android】重写onClick方法时,显示Method does not override method from its supperclass

问题 重写onClick方法时&#xff0c;显示Method does not override method from its supperclass 解决 在类上加implements View.OnClickListener

SC8908电机驱动芯片替代AN41908

SC8908 描述 五路H桥静音驱动电机驱动芯片&#xff0c;闭环直流电机光圈调节&#xff0c;支持霍尔位置检测&#xff0c; 2个步进电机。步进电机驱动带256微步细分。 主要特性 • 步进驱动H桥每路250mA最大驱动电流 • 光圈直流驱动H桥每路150mA最大驱动电流 • 单独…

C# WinForm —— 21 RichTextBox 使用

1. 加载文件到控件中 加载文件时&#xff0c;要设置文件的路径和类型RichTextBoxStreamType&#xff0c;文件类型包含&#xff1a; RichText 0&#xff1a;富文本格式&#xff08;RTF&#xff09;流PlainText 1&#xff1a;纯文本流对象链接和嵌入&#xff08;OLE&#xff…

UE4_环境_局部雾化效果

学习笔记&#xff0c;不喜勿喷&#xff01;侵权立删&#xff01;祝愿大家生活越来越好&#xff01; 本文重点介绍下材质节点SphereMask节点在体积雾中的使用方法。 一、球体遮罩SphereMask材质节点介绍&#xff1a; 球体蒙版&#xff08;SphereMask&#xff09; 表达式根据距…

Win11把应用程序添加到开机自启动中

通过WinR命令打开“运行”&#xff0c;输入shell:startup 进入到如图目录&#xff1a; 将想要自动启动的应用的快捷方式都拷贝进来。 之后在任务管理器中就能发现它了。

使用vcpkg与json文件自动安装项目依赖库

说明 本文记录自己使用vcpkg.json文件自动安装依赖库并完成编译的全过程。 关于vcpkg是什么这里就不多详细解释&#xff0c;可以看一下专门的介绍及安装的文章&#xff0c;总之了解这是一个C的包管理工具就可以了。 流程 下面介绍从GitHub上克隆C项目以及为这个项目安装所需…

python文件操作常用方法(读写txt、xlsx、CSV、和json文件)

引言 用代码做分析的时候经常需要保存中间成果&#xff0c;保存文件格式各不相同&#xff0c;在这里好好总结一下关于python文件操作的方法和注意事项 Python 提供了丰富的文件操作功能&#xff0c;允许我们创建、读取、更新和删除文件。允许程序与外部世界进行交互。 文章目录…

冯喜运:5.15黄金原油晚盘分析:鲍威尔再放鹰,降息悬念重重

【黄金消息面分析】&#xff1a;在全球经济动荡和通胀预期不断上升的背景下&#xff0c;黄金作为传统的避险资产&#xff0c;再次成为投资者关注的焦点。当前&#xff0c;黄金价格交投于2370美元/盎司左右&#xff0c;连续两日日线呈现上涨趋势&#xff0c;而白银价格也在连续三…

二进制搭建k8s

实验环境&#xff1a; k8s集群master01:192.168.1.11 k8s集群master02:192.168.1.22 master虚拟ip&#xff1a;192.168.1.100 k8s集群node01:192.168.1.33 k8s集群node01:192.168.1.44 nginxkeepalive01&#xff08;master&#xff09;:192.168.1.55 nginxkeepalive02&a…

困惑点记录

【第十章 总结思考】CIM之我见 - 知乎

Java开发大厂面试第03讲:线程的状态有哪些?它是如何工作的?

线程&#xff08;Thread&#xff09;是并发编程的基础&#xff0c;也是程序执行的最小单元&#xff0c;它依托进程而存在。一个进程中可以包含多个线程&#xff0c;多线程可以共享一块内存空间和一组系统资源&#xff0c;因此线程之间的切换更加节省资源、更加轻量化&#xff0…