Wie kann ich testen, ob eine Requisite an ein Kind weitergegeben wird?
Meine Komponente sieht ungefähr so aus: (Sie hat mehr Funktionen sowie Spalten, aber ich habe das nicht aufgenommen, um das Beispiel zu vereinfachen.)
const WeatherReport: FunctionComponent<Props> = ({ cityWeatherCollection, loading, rerender }) => {
/* some use effects skipped */
/* some event handlers skipped */
const columns = React.useMemo(() => [
{
header: 'City',
cell: ({ name, title }: EnhancedCityWeather) => <Link to={`/${name}`} className="city">{title}</Link> }, { header: 'Temp', cell: ({ temperature }: EnhancedCityWeather) => ( <div className="temperature"> <span className="celcius">{`${temperature}°C`}</span>
<span className="fahrenheit">{` (~${Math.round(temperature * (9 / 5)) + 32}°F)`}</span>
</div>
)
},
{
header: '',
cell: ({ isFavorite } : EnhancedCityWeather) => isFavorite && (
<HeartIcon
fill="#6d3fdf"
height={20}
width={20}
/>
),
},
], []);
return (
<Table columns={columns} items={sortedItems} loading={loading} />
);
};
Jetzt habe ich einige Tests wie diesen geschrieben:
jest.mock('../../../components/Table', () => ({
__esModule: true,
default: jest.fn(() => <div data-testid="Table" />),
}));
let cityWeatherCollection: EnhancedCityWeather[];
let loading: boolean;
let rerender: () => {};
beforeEach(() => {
cityWeatherCollection = [/*...some objects...*/];
loading = true;
rerender = jest.fn();
render(
<BrowserRouter>
<WeatherReport
cityWeatherCollection={cityWeatherCollection}
loading={loading}
rerender={rerender}
/>
</BrowserRouter>
);
});
it('renders a Table', () => {
expect(screen.queryByTestId('Table')).toBeInTheDocument();
});
it('passes loading prop to Table', () => {
expect(Table).toHaveBeenCalledWith(
expect.objectContaining({ loading }),
expect.anything(),
);
});
it('passes items prop to Table after sorting by isFavorite and then alphabetically', () => {
expect(Table).toHaveBeenCalledWith(
expect.objectContaining({
items: cityWeatherCollection.sort((item1, item2) => (
+item2.isFavorite - +item1.isFavorite
|| item1.name.localeCompare(item2.name)
)),
}),
expect.anything(),
);
});
Wenn Sie meine Komponente überprüfen, hat sie eine Variable namens Spalten. Ich weise diese Variable der Tabellenkomponente zu.
Ich denke, ich sollte testen, ob Spalten als Requisiten an die Table-Komponente übergeben werden. Denke ich richtig Wenn ja, können Sie mir bitte sagen, wie ich einen Testfall dafür schreiben kann?
Es ist auch hilfreich, wenn Sie mir vorschlagen können, wie ich jede in der Eigenschaft column deklarierte Zelle testen kann.
Antworten
Es wird nicht empfohlen , Implementierungsdetails wie Komponenten-Requisiten mit der React Testing Library zu testen. Stattdessen sollten Sie auf dem Bildschirm Inhalt behaupten.
Empfohlen
expect(await screen.findByText('some city')).toBeInTheDocument();
expect(screen.queryByText('filtered out city')).not.toBeInTheDocument();
Nicht empfohlen
Wenn Sie Requisiten trotzdem testen möchten, können Sie den folgenden Beispielcode ausprobieren. Quelle
import Table from './Table'
jest.mock('./Table', () => jest.fn(() => null))
// ... in your test
expect(Table).toHaveBeenCalledWith(props, context)
Sie können diesen Ansatz hauptsächlich in den beiden folgenden Szenarien betrachten.
Sie haben den empfohlenen Ansatz bereits ausprobiert, aber Sie haben festgestellt, dass die Komponente:
- Die Verwendung von Legacy-Code macht das Testen sehr schwierig. Das Refactoring der Komponente würde auch zu lange dauern oder zu riskant sein.
- ist sehr langsam und erhöht die Testzeit drastisch. Die Komponente ist auch schon woanders getestet.
Schauen Sie sich hier eine sehr ähnliche Frage an
Sie können die props()
Methode folgendermaßen verwenden:
expect(Table.props().propYouWantToCheck).toBeFalsy();
Wenn Sie nur Ihre component.props () und dann die gewünschte Requisite ausführen, können Sie damit jede Aussage machen.