我的所有组件都从上下文中获取数据和方法。我想测试 - 至少 - “组件呈现”案例,但是当然,当我尝试在测试案例中呈现组件时,它找不到来自上下文的方法/函数和数据。我找不到使用 React 测试库或 Jest 将上下文值传递给测试用例的方法(我需要使用这些库,没有酶)
假设我想测试一个简单的过滤器组件。
上下文(我猜是原始用法)
import { useState, useEffect, createContext } from "react";
const Context = createContext();
const ContextProvider = ({ children }) => {
const [books, setBooks] = useState([]);
// other data and method code..
const handleFilter = (value) => {
const filteredBooks = [...books];
if (books.length > 0) {
switch (value) {
case "alphabetical":
filteredBooks.sort((a, b) => a.title - b.title);
setBooks(filteredBooks);
break;
case "publishdate":
filteredBooks.sort(
(a, b) => b.first_publish_year - a.first_publish_year
);
setBooks(filteredBooks);
break;
default:
setBooks(filteredBooks);
}
}
};
return (
<Context.Provider value={{ handleFilter }}>
{children}
</Context.Provider>
);
};
export { ContextProvider, Context };
过滤器
import { useContext } from "react";
import { Context } from "../context/Context";
function Filter() {
const { handleFilter } = useContext(Context);
return (
<div className="filter" data-testid="filter-test">
<div className="filter-content">
<select
defaultValue="none"
className="filter-btn"
onChange={(e) => handleFilter(e.target.value)}
>
<option value="none" defaultValue disabled>
Filter Results
</option>
<option value="alphabetical">Alphabetically</option>
<option value="publishdate">Publish Date (newest)</option>
</select>
</div>
</div>
);
}
export default Filter;
Filter.test.js
import { render, screen, cleanup } from '@testing-library/react';
import Filter from './Filter';
test('renders Filter component without crashing', () => {
// I need to pass handleFilter function using Context somehow
render(<Filter />);
const filterComponent = screen.getByTestId('filter-test');
expect(filterComponent).toBeInTheDocument();
});
如果您想查看所有代码:https://codesandbox.io/s/inspiring-bhaskara-0s98g
答案 0 :(得分:0)
执行此操作的简单方法是将您的上下文提供程序作为 render()
的第一个参数的包装器进行传递:
import { render, screen, cleanup } from '@testing-library/react';
import Filter from './Filter';
// import your context; it will include the provider
import { Context } from "../context/Context";
test('renders Filter component without crashing', () => {
const contextValue = { handleFilter: () => {} };
render(
<Context.Provider value={contextValue}>
<Filter />
</Context.Provider>
);
const filterComponent = screen.getByTestId('filter-test');
expect(filterComponent).toBeInTheDocument();
});
另一种方法是将您的上下文作为渲染器的包装器提供:
import { render, screen, cleanup } from '@testing-library/react';
import Filter from './Filter';
// import your context; it will include the provider
import { Context } from "../context/Context";
test('renders Filter component without crashing', () => {
const contextValue = { handleFilter: () => {} };
const wrapper = ({ children }) => (
<Context.Provider value={contextValue}>
{children}
</Context.Provider>
);
render(<Filter />, { wrapper });
const filterComponent = screen.getByTestId('filter-test');
expect(filterComponent).toBeInTheDocument();
});
以上两种方式都可以