#reactjs #jestjs #babel-jest
#reactjs #jestjs #babel-jest
Вопрос:
Я попытался использовать expect.stringcontaining в тестовом скрипте jest с create-react-app для выполнения параллельного сопоставления строки, но это не сработало. Если я использую его с toStrictEqual, он работает. Это ошибка?
тест:
test("should update text when typing", () => {
render(<EditorWindow />);
userEvent.type(screen.getByRole("textbox"), "bar");
expect(screen.getByRole("textbox")).toHaveValue(
expect.stringContaining("bar")
);
});
test("should match text", () => {
const a = "#title<br>type text here..bar";
expect(a).toStrictEqual(expect.stringContaining("bar"));
});
Результат:
<EditorWindow> />
× should update text when typing (46 ms)
√ should match text
● <EditorWindow> /> › should update text when typing
expect(element).toHaveValue(StringContaining)
Expected the element to have value:
StringContaining "bar"
Received:
#title<br>type text here..bar
15 | render(<EditorWindow />);
16 | userEvent.type(screen.getByRole("textbox"), "bar");
> 17 | expect(screen.getByRole("textbox")).toHaveValue(
| ^
18 | expect.stringContaining("bar")
19 | );
20 | });
at Object.<anonymous> (src/components/EditorWindow.test.tsx:17:41)
Я использую следующие библиотеки:
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.6.3",
"@types/jest": "^26.0.20",
"@types/node": "^14.14.25",
"@types/react": "^17.0.1",
"@types/react-dom": "^17.0.0",
...
Надеюсь, кто-нибудь может мне помочь с этим? Заранее спасибо!
Комментарии:
1. Это будет работать для вас?
expect(a.includes('bar')).toBe(true)
2. Спасибо, я получил тест, работающий с этим кодом: test(«должен обновлять текст при вводе», () => { render(<EditorWindow />); UserEvent.type(screen.getByRole(«текстовое поле»), «bar»); const myTextAreaVal = screen.getByRole(«текстовое поле»).value; ожидать (myTextAreaVal.includes(«bar»)).toBe(true); }); Это работает, но при компиляции я получаю предупреждение typescript: свойство ‘value’ не существует для типа ‘HTMLElement’.ts(2339) на экране code:.getByRole(«текстовое поле»).value;
Ответ №1:
Мне удалось получить рабочий код без предупреждений typescript, подобных этому:
test("should update text when typing", () => {
render(<EditorWindow />);
userEvent.type(screen.getByRole("textbox"), "bar");
const myTextAreaVal = (screen.getByRole("textbox") as HTMLInputElement)
.value;
expect(myTextAreaVal.includes("bar")).toBe(true);
});
Мне пришлось использовать приведение as HTMLInputElement
типов, чтобы избавиться от предупреждений typescript и иметь возможность сохранять значение текстовой области в переменной myTextAreaVal
. Затем я использовал myTestAreaVal.includes
частичное совпадение для строки.
Спасибо Adrisolid за этот совет!