Всем привет Надеюсь вам всем товар !! Я кодирую многопользовательский тетрис Typescript React / Node в режиме онлайн с помощью socket.io, и теперь мне нужно протестировать свой код с помощью jest, но я получаю несколько тернарных операций для рендеринга моей сетки в DOM.
Я новичок в модульном тестировании, и я действительно застреваю, чтобы проверить его, если кто-то даст мне несколько советов или способ научиться делать это, я очень ценю это! Я действительно не хочу, чтобы кто-то провел тест и опубликовал его, я хочу научиться основам c!
GameGrid.tsx:
import React from "react";
import "./GameGrid.css";
import { Board } from "../../reducers/userReducers";
export const pieces = [
{
color: "blue",
opacity: 1,
},
{
color: "green",
opacity: 1,
},
{
color: "cyan",
opacity: 1,
},
{
color: "orange",
opacity: 1,
},
{
color: "purple",
opacity: 1,
},
{
color: "yellow",
opacity: 1,
},
{
color: "red",
opacity: 1,
},
{ color: "", opacity: 1 },
{
color: "blue",
opacity: 0.5,
},
{
color: "green",
opacity: 0.5,
},
{
color: "cyan",
opacity: 0.5,
},
{
color: "orange",
opacity: 0.5,
},
{
color: "purple",
opacity: 0.5,
},
{
color: "yellow",
opacity: 0.5,
},
{
color: "red",
opacity: 0.5,
},
];
interface IProps {
board: Board;
}
const GameGrid: React.FC<IProps> = (props) => {
return (
// tslint:disable-next-line: max-line-length
<div className="Grid">
{props.board.tmpGrid.map((rows, y) => {
return (
<div className="Line" key={y}>
{rows.map((_value, x) => {
// tslint:disable-next-line: jsx-self-close
return (
<div
className="Case"
key={x}
style={
_value
? {
backgroundColor:
pieces[
_value > 9
? _value / 10 - 1
: _value === -1
? 7
: _value - 1
].color,
opacity: _value > 9 ? 0.5 : 1,
}
: { backgroundColor: "lightgrey" }
}
/>
);
})}
</div>
);
})}
</div>
);
};
export default GameGrid;
GameGrid.test.tsx:
import React from "react";
import { configure, mount } from "enzyme";
import * as ReactSixteenAdapter from "enzyme-adapter-react-16";
import GameGrid from "../components/GameBoard/GameGrid";
const adapter = ReactSixteenAdapter as any;
configure({ adapter: new adapter.default() });
const props = {
board: {
grid: Array.from({ length: 20 }, () => Array(10).fill(0)),
tmpGrid: Array.from({ length: 20 }, () => Array(10).fill(0)),
currentPiece: {
tetrimino: "I",
shape: [
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0],
],
color: "blue",
width: 3,
height: 3,
pos: {
x: -1,
y: 1,
},
shapeState: 0,
},
},
};
describe("<Grid />", () => {
const wrapper = mount(<GameGrid board={props.board} />);
it("Should create an grid", () => {
expect(wrapper.find(".Grid")).toHaveLength(1);
});
it("Should create a grid with 20 lines", () => {
expect(wrapper.find(".Line")).toHaveLength(20);
});
it("Should create an grid with 200 cases", () => {
expect(wrapper.find(".Case")).toHaveLength(200);
});
it("Should render an blue 'I' piece", () => {
expect(wrapper) // test the multiple ternary operation.
});
});
return from jest:
GameGrid.tsx| 100 | 12.5 | 100 | 100 | 85,89,91,94
Извините, если мой код заставил вас плакать кровью. Я новичок в реакции машинописного текста и модульном тесте! Спасибо всем, хорошего дня!